<template><div><h1 id="组件" tabindex="-1"><a class="header-anchor" href="#组件" aria-hidden="true">#</a> 组件</h1>
<p><img src="@source/blog/Flutter/assets/944365-33b919838e07f046-1683292973624.webp" alt="组件库"></p>
<h2 id="件用materialapp-和-scaffold两个组件装饰app" tabindex="-1"><a class="header-anchor" href="#件用materialapp-和-scaffold两个组件装饰app" aria-hidden="true">#</a> 件用<code v-pre>MaterialApp</code> 和 <code v-pre>Scaffold</code>两个组件装饰<code v-pre>App</code></h2>
<ol>
<li>
<p><code v-pre>MaterialApp</code></p>
<p><code v-pre>MaterialApp</code>是一个方便的<code v-pre>Widget</code>，它封装了应用程序实现<code v-pre>Material Design</code>所需要的一些<code v-pre>Widget</code>。一般作为顶层<code v-pre>widget</code>使用。</p>
<p><strong>常用的属性：</strong>
​	<code v-pre>home</code>（主页）
​	<code v-pre>title</code>（标题）
​	<code v-pre>color</code>（颜色）
​	<code v-pre>theme</code>（主题）
​	<code v-pre>routes</code>（路由）
​	...</p>
</li>
<li>
<p><code v-pre>Scaffold</code></p>
<p><code v-pre>Scaffold</code>是<code v-pre>Material Design</code>布局结构的基本实现。此类提供了用于显示<code v-pre>drawer</code>、<code v-pre>snackbar</code>和底部<code v-pre>sheet</code>的<code v-pre>API</code>。</p>
<p><strong>Scaffold 有下面几个主要属性：</strong></p>
<p>​	<code v-pre>appBar</code> - 显示在界面顶部的一个 <code v-pre>AppBar</code>。
​	<code v-pre>body</code> - 当前界面所显示的主要内容 <code v-pre>Widget</code>。
​	<code v-pre>drawer</code> - 抽屉菜单控件。
​	...</p>
</li>
</ol>
<h2 id="把内容单独抽离成一个组件" tabindex="-1"><a class="header-anchor" href="#把内容单独抽离成一个组件" aria-hidden="true">#</a> 把内容单独抽离成一个组件</h2>
<h3 id="_1-无状态组件" tabindex="-1"><a class="header-anchor" href="#_1-无状态组件" aria-hidden="true">#</a> 1. 无状态组件</h3>
<p><code v-pre>StatelessWidget</code>:</p>
<ul>
<li>
<p>**特点：**无状态、不可变，属性不能改变</p>
</li>
<li>
<p><strong>应用场景：</strong> 展示信息，不能有动作（即用户互动）</p>
</li>
<li>
<p><strong>示例：</strong><code v-pre>Icon</code>、<code v-pre>IconButton</code>、<code v-pre>Text</code></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token comment">// 1. 继承StatelessWidget</span>
<span class="token keyword">class</span> <span class="token class-name">MyWidget</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>

<span class="token comment">// 2. 复写build方法</span>
  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>

     <span class="token comment">// 3. 返回你需要的Widget视图</span>
     <span class="token keyword">return</span> <span class="token function">_buildMyWidget</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li>
</ul>
<h3 id="_2-有状态组件" tabindex="-1"><a class="header-anchor" href="#_2-有状态组件" aria-hidden="true">#</a> 2. 有状态组件</h3>
<p><code v-pre>StatefulWidget</code>:</p>
<ul>
<li>
<p>**特点：**存在状态 <code v-pre>&amp; </code>随着<code v-pre>Widget</code>生命周期发生变化</p>
</li>
<li>
<p>**应用场景：**通过改变状态使<code v-pre>UI</code>发生变化（可包含用户交互）</p>
</li>
<li>
<p><strong>示例：</strong><code v-pre>Checkbox</code>、<code v-pre>Radio</code>、<code v-pre>Slider</code></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token comment">// 1. 继承StatefulWidget</span>
<span class="token keyword">class</span> <span class="token class-name">MyWidget</span> <span class="token keyword">extends</span> <span class="token class-name">StatefulWidget</span> <span class="token punctuation">{</span>

<span class="token comment">// 2. 重写createState()，返回一个State状态</span>
  <span class="token metadata function">@override</span>
  <span class="token class-name">State</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">StatefulWidget</span><span class="token punctuation">></span></span> <span class="token function">createState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token function">_MyWidgetState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// 3. 实现State（继承了State，包含了视图和交互逻辑）</span>
<span class="token keyword">class</span> _MyWidgetState <span class="token keyword">extends</span> <span class="token class-name">State</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">MyWidget</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>

<span class="token comment">// 4. 复写build方法,返回你需要的Widget视图</span>
  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>

     <span class="token keyword">return</span> <span class="token function">_buildMyWidget</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

总结说明：
<span class="token comment">// 1. MyWidget：继承了StatefulWidget + 依赖_MyWidgetState返回State</span>
<span class="token comment">// 2. _MyWidgetState 又继承了 State&lt;MyWidget>，包含了视图和交互逻辑</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li>
</ul>
<h2 id="container容器组件" tabindex="-1"><a class="header-anchor" href="#container容器组件" aria-hidden="true">#</a> <code v-pre>Container</code>容器组件</h2>
<table>
<thead>
<tr>
<th><strong>名称</strong></th>
<th><strong>功能</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong><code v-pre>alignment</code></strong></td>
<td><code v-pre>topCenter</code>：顶部居中对齐<br/><code v-pre>topLeft</code>：顶部左对齐<br/><code v-pre>topRight</code>：顶部右对齐<br/><code v-pre>center</code>：水平垂直居中对齐<br/><code v-pre>centerLeft</code>：垂直居中水平居左对齐<br/><code v-pre>centerRight</code>：垂直居中水平居右对齐<br/><code v-pre>bottomCenter</code>：底部居中对齐<br/><code v-pre>bottomLeft</code>：底部居左对齐</td>
</tr>
<tr>
<td><code v-pre>bottomRight</code>：底部居右对齐</td>
<td></td>
</tr>
<tr>
<td><strong><code v-pre>decoration</code></strong></td>
<td><code v-pre>BoxDecoration</code>：实现边框、圆角、阴影、现状、渐变、背景图像<br/><code v-pre>ShapeDecoration</code>：实现四个边，分别指定颜色、宽度、底部线、矩形边色、圆形边色等<br/><code v-pre>FlutterLogoDecoration</code>：实现Flutter图片<br/><code v-pre>UnderlineTabindicator</code>：下划线</td>
</tr>
<tr>
<td><strong><code v-pre>margin</code></strong></td>
<td><code v-pre>margin</code>属性是表示<code v-pre>Container</code>与外部其他组件的距离。 <code v-pre>EdgeInsets.all(20.0)</code></td>
</tr>
<tr>
<td><strong><code v-pre>padding</code></strong></td>
<td><code v-pre>padding</code>就是<code v-pre>Container</code>的内边距，指<code v-pre>Container</code>边缘与<code v-pre>Child</code>之间的距离。<code v-pre>padding:EdgeInsets.all(10.0)</code></td>
</tr>
<tr>
<td><strong><code v-pre>transform</code></strong></td>
<td>让<code v-pre>Container</code>容易进行一些旋转之类的<code v-pre>transform: Matrix4.rotationZ(0.2)</code></td>
</tr>
<tr>
<td><strong><code v-pre>height</code></strong></td>
<td>容器高度</td>
</tr>
<tr>
<td><strong><code v-pre>width</code></strong></td>
<td>容器宽度</td>
</tr>
<tr>
<td><strong><code v-pre>child</code></strong></td>
<td>容器子元素</td>
</tr>
</tbody>
</table>
<p><strong>示例代码：</strong></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'package:flutter/material.dart'</span></span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">MyContainer</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token class-name">MyContainer</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token class-name">Scaffold</span><span class="token punctuation">(</span>
      appBar<span class="token punctuation">:</span> <span class="token class-name">AppBar</span><span class="token punctuation">(</span>
        title<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"Container组件"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
      body<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">ContainerMain</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">ContainerMain</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token class-name">ContainerMain</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
      <span class="token comment">// alignment: Alignment.center, // Container容器内元素的方位</span>
      width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
      height<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
      padding<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 内边距</span>
      margin<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">fromLTRB</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 外边距</span>
      decoration<span class="token punctuation">:</span> <span class="token class-name">BoxDecoration</span><span class="token punctuation">(</span>
        color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>red<span class="token punctuation">,</span> <span class="token comment">//背景颜色</span>
        border<span class="token punctuation">:</span> <span class="token class-name">Border</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span> <span class="token comment">// 边框</span>
          color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>black
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
        borderRadius<span class="token punctuation">:</span> <span class="token class-name">BorderRadius</span><span class="token punctuation">.</span><span class="token function">circular</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 圆角 也可实现圆形</span>
        boxShadow<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token punctuation">[</span> <span class="token comment">// 阴影效果</span>
          <span class="token class-name">BoxShadow</span><span class="token punctuation">(</span>color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>brown<span class="token punctuation">,</span> blurRadius<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">)</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token comment">// LinearGradient 背景线性渐变 RadialGradient 径向渐变</span>
        gradient<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">LinearGradient</span><span class="token punctuation">(</span>colors<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token class-name">Colors</span><span class="token punctuation">.</span>red<span class="token punctuation">,</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>yellow<span class="token punctuation">]</span><span class="token punctuation">)</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
      transform<span class="token punctuation">:</span> <span class="token class-name">Matrix4</span><span class="token punctuation">.</span><span class="token function">rotationZ</span><span class="token punctuation">(</span><span class="token number">0.1</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span>
        <span class="token string-literal"><span class="token string">"Container组件"</span></span><span class="token punctuation">,</span>
        style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>
          color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>white<span class="token punctuation">,</span> 
          fontSize<span class="token punctuation">:</span> <span class="token number">20</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="decoration" tabindex="-1"><a class="header-anchor" href="#decoration" aria-hidden="true">#</a> <code v-pre>decoration:</code></h3>
<h4 id="_1-boxdecoration" tabindex="-1"><a class="header-anchor" href="#_1-boxdecoration" aria-hidden="true">#</a> 1. <code v-pre>BoxDecoration</code></h4>
<p>**特点：**实现边框、圆角、阴影、形状、渐变、背景图像</p>
<p><strong>属性说明：</strong></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code> <span class="token keyword">const</span> <span class="token class-name">BoxDecoration</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>color<span class="token punctuation">,</span> <span class="token comment">// 底色</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>image<span class="token punctuation">,</span> <span class="token comment">// 图片</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>border<span class="token punctuation">,</span> <span class="token comment">// 边色</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>borderRadius<span class="token punctuation">,</span> <span class="token comment">// 圆角度</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>boxShadow<span class="token punctuation">,</span> <span class="token comment">// 阴影</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>gradient<span class="token punctuation">,</span> <span class="token comment">// 渐变</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>backgroundBlendMode<span class="token punctuation">,</span> <span class="token comment">// 混合Mode</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>shape <span class="token operator">=</span> <span class="token class-name">BoxShape</span><span class="token punctuation">.</span>rectangle<span class="token punctuation">,</span>  <span class="token comment">// 形状</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>使用示例：</strong></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code>decoration<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">BoxDecoration</span><span class="token punctuation">(</span>
  border<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Border</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>color<span class="token punctuation">:</span> <span class="token class-name">Color</span><span class="token punctuation">(</span><span class="token number">0xFFFF0000</span><span class="token punctuation">)</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 边色与边宽度</span>
  color<span class="token punctuation">:</span> <span class="token class-name">Color</span><span class="token punctuation">(</span><span class="token number">0xFF9E9E9E</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 底色</span>
  borderRadius<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">BorderRadius</span><span class="token punctuation">.</span><span class="token function">circular</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token number">20.0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 圆角度</span>
  shape<span class="token punctuation">:</span> <span class="token class-name">BoxShape</span><span class="token punctuation">.</span>rectangle<span class="token punctuation">,</span> <span class="token comment">// 默认值是矩形</span>
  <span class="token comment">// shape: BoxShape.circle, // 圆形，使用圆形时不可以使用borderRadius</span>

  <span class="token comment">// 阴影：此处采用两层阴影说明</span>
  boxShadow<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token class-name">BoxShadow</span><span class="token punctuation">(</span>color<span class="token punctuation">:</span> <span class="token class-name">Color</span><span class="token punctuation">(</span><span class="token number">0x99FFFF00</span><span class="token punctuation">)</span><span class="token punctuation">,</span> 
    offset<span class="token punctuation">:</span> <span class="token class-name">Offset</span><span class="token punctuation">(</span><span class="token number">5.0</span><span class="token punctuation">,</span> <span class="token number">5.0</span><span class="token punctuation">)</span><span class="token punctuation">,</span>  <span class="token comment">// 阴影位置由offset决定</span>
    blurRadius<span class="token punctuation">:</span> <span class="token number">10.0</span><span class="token punctuation">,</span> <span class="token comment">// 阴影模糊层度由blurRadius大小决定（大就更透明更扩散）</span>
    spreadRadius<span class="token punctuation">:</span> <span class="token number">2.0</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 阴影模糊大小由spreadRadius决定</span>
    <span class="token class-name">BoxShadow</span><span class="token punctuation">(</span>color<span class="token punctuation">:</span> <span class="token class-name">Color</span><span class="token punctuation">(</span><span class="token number">0x9900FF00</span><span class="token punctuation">)</span><span class="token punctuation">,</span> offset<span class="token punctuation">:</span> <span class="token class-name">Offset</span><span class="token punctuation">(</span><span class="token number">1.0</span><span class="token punctuation">,</span> <span class="token number">1.0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token class-name">BoxShadow</span><span class="token punctuation">(</span>color<span class="token punctuation">:</span> <span class="token class-name">Color</span><span class="token punctuation">(</span><span class="token number">0xFF0000FF</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>

  <span class="token comment">// 渐变</span>
    <span class="token comment">// 类型1：环形</span>
      gradient<span class="token punctuation">:</span> <span class="token class-name">RadialGradient</span><span class="token punctuation">(</span>colors<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token class-name">Color</span><span class="token punctuation">(</span><span class="token number">0xFFFFFF00</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token class-name">Color</span><span class="token punctuation">(</span><span class="token number">0xFF00FF00</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token class-name">Color</span><span class="token punctuation">(</span><span class="token number">0xFF00FFFF</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>radius<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> tileMode<span class="token punctuation">:</span> <span class="token class-name">TileMode</span><span class="token punctuation">.</span>mirror<span class="token punctuation">)</span>
    <span class="token comment">// 类型2：扫描式</span>
    <span class="token comment">// gradient: SweepGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)], startAngle: 0.0, endAngle: 1*3.14)</span>
    <span class="token comment">// 类型3：线性</span>
    <span class="token comment">// gradient: LinearGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)], begin: FractionalOffset(1, 0), end: FractionalOffset(0, 1))</span>
  
  <span class="token comment">// 背景图像</span>
  image<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">DecorationImage</span><span class="token punctuation">(</span>
        image<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">AssetImage</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'graphics/background.png'</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 加载本地图片，还有其他加载方式，如网络、文件等</span>
        centerSlice<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Rect</span><span class="token punctuation">.</span><span class="token function">fromLTRB</span><span class="token punctuation">(</span><span class="token number">10.0</span><span class="token punctuation">,</span> <span class="token number">20.0</span><span class="token punctuation">,</span> <span class="token number">30.0</span><span class="token punctuation">,</span> <span class="token number">40.0</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token comment">// 设置图片大小</span>
        fit<span class="token punctuation">:</span> <span class="token class-name">BoxFit</span><span class="token punctuation">.</span>fill <span class="token comment">// 设置填充方式</span>
  <span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="_2-shapedecoration" tabindex="-1"><a class="header-anchor" href="#_2-shapedecoration" aria-hidden="true">#</a> 2. <code v-pre>ShapeDecoration</code></h4>
<p><strong>特点：</strong> 实现四个边，分别指定颜色、宽度、底部线、矩形边色、圆形边色等</p>
<p><strong>属性说明：</strong></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">const</span> <span class="token class-name">ShapeDecoration</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>color<span class="token punctuation">,</span> <span class="token comment">// 底色</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>image<span class="token punctuation">,</span> <span class="token comment">// 图片</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>gradient<span class="token punctuation">,</span> <span class="token comment">// 渐变</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>shadows<span class="token punctuation">,</span> <span class="token comment">// 阴影</span>
  <span class="token metadata function">@required</span> <span class="token keyword">this</span><span class="token punctuation">.</span>shape<span class="token punctuation">,</span> <span class="token comment">// 形状</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>具体使用：</strong></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code>decoration<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">ShapeDecoration</span><span class="token punctuation">(</span>
  <span class="token comment">// 统一四边颜色和宽度</span>
  shape<span class="token punctuation">:</span> <span class="token class-name">Border</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>color<span class="token punctuation">:</span> <span class="token class-name">Color</span><span class="token punctuation">(</span><span class="token number">0xFF00FFFF</span><span class="token punctuation">)</span><span class="token punctuation">,</span>style<span class="token punctuation">:</span> <span class="token class-name">BorderStyle</span><span class="token punctuation">.</span>solid<span class="token punctuation">,</span>width<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">)</span>

  <span class="token comment">// 四个边分别指定颜色 &amp; 宽度，当只给bottom时与UnderlineInputBorder一致效果</span>
  <span class="token comment">// shape: Border(top: b, bottom: b, right: b, left: b)</span>

  <span class="token comment">// 设置矩形边色</span>
  <span class="token comment">// shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10)), side: BorderSide(color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2))</span>
  
  <span class="token comment">// 设置圆形边色</span>
  <span class="token comment">// shape: CircleBorder(side: BorderSide(color: Color(0xFFFFFF00), style: BorderStyle.solid, width: 2))</span>
  
  <span class="token comment">// 设置竖向椭圆边色（类似体育场）</span>
  <span class="token comment">// shape: StadiumBorder(side: BorderSide(width: 2, style: BorderStyle.solid, color: Color(0xFF00FFFF))</span>
  
  <span class="token comment">// 设置角形（八边角）边色</span>
  <span class="token comment">// shape: BeveledRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10)), side: BorderSide(color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2))</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="_3-underlinetabindicator" tabindex="-1"><a class="header-anchor" href="#_3-underlinetabindicator" aria-hidden="true">#</a> 3. <code v-pre>UnderlineTabindicator</code></h4>
<p>**特点：**下划线，可控制下划高底 &amp; 左右边距</p>
<p><strong>属性说明：</strong></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">const</span> <span class="token class-name">UnderlineTabIndicator</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>borderSide <span class="token operator">=</span> <span class="token keyword">const</span> <span class="token class-name">BorderSide</span><span class="token punctuation">(</span>width<span class="token punctuation">:</span> <span class="token number">2.0</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>white<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 控制线的长度 &amp; 颜色</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>insets <span class="token operator">=</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span>zero<span class="token punctuation">,</span> <span class="token comment">// 控制下划高底，左右边距</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>具体使用：</strong></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code>decoration<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">UnderlineTabIndicator</span><span class="token punctuation">(</span>
  borderSide<span class="token punctuation">:</span> <span class="token class-name">BorderSide</span><span class="token punctuation">(</span>width<span class="token punctuation">:</span> <span class="token number">2.0</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>white<span class="token punctuation">)</span><span class="token punctuation">,</span> 
  insets<span class="token punctuation">:</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">fromLTRB</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">10</span><span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="_4-flutterlogodecoration" tabindex="-1"><a class="header-anchor" href="#_4-flutterlogodecoration" aria-hidden="true">#</a> 4. <code v-pre>FlutterLogoDecoration</code></h4>
<p>**特点：**实现Flutter logo 图片</p>
<p><strong>属性构造：</strong></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">const</span> <span class="token class-name">FlutterLogoDecoration</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>lightColor <span class="token operator">=</span> <span class="token keyword">const</span> <span class="token class-name">Color</span><span class="token punctuation">(</span><span class="token number">0xFF42A5F5</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// Colors.blue[400]</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>darkColor <span class="token operator">=</span> <span class="token keyword">const</span> <span class="token class-name">Color</span><span class="token punctuation">(</span><span class="token number">0xFF0D47A1</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// Colors.blue[900]</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>textColor <span class="token operator">=</span> <span class="token keyword">const</span> <span class="token class-name">Color</span><span class="token punctuation">(</span><span class="token number">0xFF616161</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>style <span class="token operator">=</span> <span class="token class-name">FlutterLogoStyle</span><span class="token punctuation">.</span>markOnly<span class="token punctuation">,</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>margin <span class="token operator">=</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span>zero<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="padding-与margin" tabindex="-1"><a class="header-anchor" href="#padding-与margin" aria-hidden="true">#</a> <code v-pre>padding</code> 与<code v-pre>margin</code></h3>
<p><strong>简介：</strong></p>
<ul>
<li>内边距，即本<code v-pre>Widget</code>边框和内容区之间距离。</li>
<li>外边距，即本<code v-pre>Widget</code>与父边框的距离</li>
</ul>
<p><strong>具体使用：</strong></p>
<ul>
<li>采用<code v-pre>EdgeInsets</code>类</li>
</ul>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token comment">// 1. 所有方向均使用相同数值的填充。</span>
<span class="token function">all</span><span class="token punctuation">(</span>double value<span class="token punctuation">)</span> 
<span class="token comment">// 示例：4个方向各添加16像素补白</span>
padding<span class="token punctuation">:</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token number">16.0</span><span class="token punctuation">)</span>

<span class="token comment">// 2. 分别指定四个方向的不同填充</span>
<span class="token function">fromLTRB</span><span class="token punctuation">(</span>double left<span class="token punctuation">,</span> double top<span class="token punctuation">,</span> double right<span class="token punctuation">,</span> double bottom<span class="token punctuation">)</span>
<span class="token comment">// 示例：</span>
padding<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">fromLTRB</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span><span class="token number">20</span><span class="token punctuation">,</span><span class="token number">30</span><span class="token punctuation">,</span><span class="token number">40</span><span class="token punctuation">)</span>

<span class="token comment">// 3. 设置具体某个方向的填充(可以同时指定多个方向)</span>
<span class="token function">only</span><span class="token punctuation">(</span><span class="token punctuation">{</span>left<span class="token punctuation">,</span> top<span class="token punctuation">,</span> right <span class="token punctuation">,</span>bottom <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 示例：在左边添加8像素补白</span>
padding<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">only</span><span class="token punctuation">(</span>left<span class="token punctuation">:</span> <span class="token number">8.0</span><span class="token punctuation">)</span><span class="token punctuation">,</span>

<span class="token comment">// 4. 设置对称方向的填充</span>
<span class="token comment">// vertical：针对垂直方向top、bottom</span>
<span class="token comment">// horizontal：针对横向方向left、right</span>
<span class="token function">symmetric</span><span class="token punctuation">(</span><span class="token punctuation">{</span> vertical<span class="token punctuation">,</span> horizontal <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 示例：垂直方向上下各添加8像素补白</span>
padding<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">symmetric</span><span class="token punctuation">(</span>vertical<span class="token punctuation">:</span> <span class="token number">8.0</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="alignment" tabindex="-1"><a class="header-anchor" href="#alignment" aria-hidden="true">#</a> <code v-pre>alignment</code></h3>
<p><strong>简介：</strong></p>
<ul>
<li>子<code v-pre>Widget</code>对齐，生效范围：父<code v-pre>Widget</code>尺寸 &gt; <code v-pre>child Widget</code>尺寸</li>
</ul>
<p><strong>具体使用：</strong></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token comment">// 居中 &amp; 各方向对齐</span>
center
centerLeft
centerRight

<span class="token comment">// 底部对齐 &amp; 各方向对齐</span>
bottomCenter
bottomLeft
bottomRight

<span class="token comment">// 顶部对齐 &amp; 各方向对齐</span>
topCenter
topLeft
topRight

<span class="token comment">// 示例</span>
alignment：<span class="token class-name">Alignment</span><span class="token punctuation">.</span>center
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="文本组件text、richtext、textfield" tabindex="-1"><a class="header-anchor" href="#文本组件text、richtext、textfield" aria-hidden="true">#</a> 文本组件<code v-pre>Text</code>、<code v-pre>RichText</code>、<code v-pre>TextField</code></h2>
<h3 id="_1-text" tabindex="-1"><a class="header-anchor" href="#_1-text" aria-hidden="true">#</a> 1. <code v-pre>Text</code></h3>
<ul>
<li>
<p>**应用场景：**普通文本</p>
</li>
<li>
<p><strong>属性设置：</strong></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token class-name">Key</span> key<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>style<span class="token punctuation">,</span> <span class="token comment">// 设置文字样式，具体见下面的说明</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>textAlign<span class="token punctuation">,</span> <span class="token comment">// 文字对齐方式：（center居中，left左对齐，right右对齐，justfy两端对齐）</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>textDirection<span class="token punctuation">,</span> <span class="token comment">// 文本方向（ltr从左至右，rtl从右至左）</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>locale<span class="token punctuation">,</span> 
    <span class="token keyword">this</span><span class="token punctuation">.</span>softWrap<span class="token punctuation">,</span><span class="token comment">// 是否自动换行（true自动换行，false单行显示，超出屏幕部分默认截断处理）</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>overflow<span class="token punctuation">,</span> <span class="token comment">// 文字超出屏幕之后的处理方式（clip裁剪，fade渐隐，ellipsis省略号）</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>textScaleFactor<span class="token punctuation">,</span> <span class="token comment">// 字体显示倍率</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>maxLines<span class="token punctuation">,</span> <span class="token comment">// maxLines 文字显示最大行数</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>semanticsLabel<span class="token punctuation">,</span> 
  <span class="token punctuation">}</span>

 <span class="token keyword">const</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>inherit <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>color<span class="token punctuation">,</span><span class="token comment">//文本样式</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>fontSize<span class="token punctuation">,</span><span class="token comment">//字体大小</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>fontWeight<span class="token punctuation">,</span><span class="token comment">//绘制文本时的字体粗细</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>fontStyle<span class="token punctuation">,</span><span class="token comment">//字体变体</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>letterSpacing<span class="token punctuation">,</span><span class="token comment">//水平字母之间的空间间隔(逻辑像素为单位),可以负值</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>wordSpacing<span class="token punctuation">,</span><span class="token comment">//单词之间添加的空间间隔(逻辑像素为单位),可以负值</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>textBaseline<span class="token punctuation">,</span><span class="token comment">//对齐文本的水平线</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>height<span class="token punctuation">,</span><span class="token comment">//文本行与行的高度,作为字体代销的倍数</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>locale<span class="token punctuation">,</span><span class="token comment">//用于选择区域定字形的语言环境</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>foreground<span class="token punctuation">,</span><span class="token comment">//文本的前景色，不能与color共同设置</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>background<span class="token punctuation">,</span><span class="token comment">//文本背景色</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>shadows<span class="token punctuation">,</span><span class="token comment">//Flutter Decoration背景设定(边框，圆角，阴影,渐变等)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>decoration<span class="token punctuation">,</span><span class="token comment">//绘制文本装饰，添加上下划线，删除线</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>decorationColor<span class="token punctuation">,</span><span class="token comment">//文本装饰的颜色</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>decorationStyle<span class="token punctuation">,</span><span class="token comment">//文本装饰的样式，控制画虚线，点，波浪线</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>debugLabel<span class="token punctuation">,</span>
    <span class="token class-name">String</span> fontFamily<span class="token punctuation">,</span><span class="token comment">//使用字体的名称</span>
    <span class="token class-name">String</span> package<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li>
<li>
<p><strong>实例演示：</strong></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">class</span> <span class="token class-name">TextMain</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token class-name">TextMain</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token class-name">Column</span><span class="token punctuation">(</span>
      children<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>
        <span class="token class-name">Text</span><span class="token punctuation">(</span>
          <span class="token string-literal"><span class="token string">"下方波浪线"</span></span><span class="token punctuation">,</span>
          style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>
            fontSize<span class="token punctuation">:</span> <span class="token number">24</span><span class="token punctuation">,</span>
            decoration<span class="token punctuation">:</span> <span class="token class-name">TextDecoration</span><span class="token punctuation">.</span>underline<span class="token punctuation">,</span>
            decorationStyle<span class="token punctuation">:</span> <span class="token class-name">TextDecorationStyle</span><span class="token punctuation">.</span>wavy<span class="token punctuation">,</span>
            decorationThickness<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token class-name">Text</span><span class="token punctuation">(</span>
          <span class="token string-literal"><span class="token string">"中间删除线"</span></span><span class="token punctuation">,</span>
          style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>
              fontSize<span class="token punctuation">:</span> <span class="token number">24</span><span class="token punctuation">,</span>
              decoration<span class="token punctuation">:</span> <span class="token class-name">TextDecoration</span><span class="token punctuation">.</span>lineThrough<span class="token punctuation">,</span>
              decorationStyle<span class="token punctuation">:</span> <span class="token class-name">TextDecorationStyle</span><span class="token punctuation">.</span>solid<span class="token punctuation">,</span>
              decorationColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>red<span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token class-name">Text</span><span class="token punctuation">(</span>
          <span class="token string-literal"><span class="token string">'文字添加背景色'</span></span><span class="token punctuation">,</span>
          style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>
            fontSize<span class="token punctuation">:</span> <span class="token number">24</span><span class="token punctuation">,</span>
            color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>white<span class="token punctuation">,</span>
            fontWeight<span class="token punctuation">:</span> <span class="token class-name">FontWeight</span><span class="token punctuation">.</span>bold<span class="token punctuation">,</span>
            backgroundColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>red<span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token class-name">ShadowText</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token class-name">Text</span><span class="token punctuation">(</span>
          <span class="token string-literal"><span class="token string">'常规红色阴影'</span></span><span class="token punctuation">,</span>
          style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>
            fontSize<span class="token punctuation">:</span> <span class="token number">48</span><span class="token punctuation">,</span>
            color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">,</span>
            fontWeight<span class="token punctuation">:</span> <span class="token class-name">FontWeight</span><span class="token punctuation">.</span>bold<span class="token punctuation">,</span>
            shadows<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token class-name">Shadow</span><span class="token punctuation">(</span>color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>red<span class="token punctuation">,</span> blurRadius<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token class-name">Text</span><span class="token punctuation">(</span>
          <span class="token string-literal"><span class="token string">'立体红色阴影'</span></span><span class="token punctuation">,</span>
          style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>
            fontSize<span class="token punctuation">:</span> <span class="token number">48</span><span class="token punctuation">,</span>
            color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">,</span>
            fontWeight<span class="token punctuation">:</span> <span class="token class-name">FontWeight</span><span class="token punctuation">.</span>bold<span class="token punctuation">,</span>
            shadows<span class="token punctuation">:</span> <span class="token punctuation">[</span>
              <span class="token class-name">Shadow</span><span class="token punctuation">(</span>color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>red<span class="token punctuation">,</span> blurRadius<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> offset<span class="token punctuation">:</span> <span class="token class-name">Offset</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token class-name">Text</span><span class="token punctuation">(</span>
          <span class="token string-literal"><span class="token string">'阴影实现描边'</span></span><span class="token punctuation">,</span>
          style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>
            fontSize<span class="token punctuation">:</span> <span class="token number">48</span><span class="token punctuation">,</span>
            color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>white<span class="token punctuation">,</span>
            fontWeight<span class="token punctuation">:</span> <span class="token class-name">FontWeight</span><span class="token punctuation">.</span>bold<span class="token punctuation">,</span>
            shadows<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token class-name">Shadow</span><span class="token punctuation">(</span>color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>red<span class="token punctuation">,</span> blurRadius<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token class-name">HollowText</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">ShadowText</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token class-name">ShadowText</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token class-name">ShaderMask</span><span class="token punctuation">(</span>
      shaderCallback<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token class-name">Rect</span> bounds<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">const</span> <span class="token class-name">LinearGradient</span><span class="token punctuation">(</span>
          colors<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token class-name">Colors</span><span class="token punctuation">.</span>blueAccent<span class="token punctuation">,</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>greenAccent<span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">createShader</span><span class="token punctuation">(</span><span class="token class-name">Offset</span><span class="token punctuation">.</span>zero <span class="token operator">&amp;</span> bounds<span class="token punctuation">.</span>size<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span>
        <span class="token string-literal"><span class="token string">'文字设置渐变色'</span></span><span class="token punctuation">,</span>
        style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>
          fontSize<span class="token punctuation">:</span> <span class="token number">24</span><span class="token punctuation">,</span>
          color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>white<span class="token punctuation">,</span>
          fontWeight<span class="token punctuation">:</span> <span class="token class-name">FontWeight</span><span class="token punctuation">.</span>bold<span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">HollowText</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token class-name">HollowText</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token class-name">Stack</span><span class="token punctuation">(</span>
      children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span>
          <span class="token string-literal"><span class="token string">'空心文字'</span></span><span class="token punctuation">,</span>
          style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>
            fontSize<span class="token punctuation">:</span> <span class="token number">48</span><span class="token punctuation">,</span>
            color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>white<span class="token punctuation">,</span>
            fontWeight<span class="token punctuation">:</span> <span class="token class-name">FontWeight</span><span class="token punctuation">.</span>bold<span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token class-name">Text</span><span class="token punctuation">(</span>
          <span class="token string-literal"><span class="token string">'空心文字'</span></span><span class="token punctuation">,</span>
          style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>
            fontSize<span class="token punctuation">:</span> <span class="token number">48</span><span class="token punctuation">,</span>
            fontWeight<span class="token punctuation">:</span> <span class="token class-name">FontWeight</span><span class="token punctuation">.</span>bold<span class="token punctuation">,</span>
            foreground<span class="token punctuation">:</span> <span class="token class-name">Paint</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
              <span class="token punctuation">.</span><span class="token punctuation">.</span>style <span class="token operator">=</span> <span class="token class-name">PaintingStyle</span><span class="token punctuation">.</span>stroke
              <span class="token punctuation">.</span><span class="token punctuation">.</span>strokeWidth <span class="token operator">=</span> <span class="token number">0.1</span>
              <span class="token punctuation">.</span><span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li>
<li>
<p>**特别注意：**在 <code v-pre>Flutter</code> 中，并不是每个 <code v-pre>Widget</code> 都有点击事件，如上述说的文本<code v-pre>Text</code> 就没有</p>
</li>
<li>
<p>**解决方案：**需用一个 <code v-pre>GestureDetector</code>组件包住Text 组件 &amp; 实现<code v-pre>onTap()</code> 事件</p>
</li>
</ul>
<h3 id="_2-richtext" tabindex="-1"><a class="header-anchor" href="#_2-richtext" aria-hidden="true">#</a> 2. <code v-pre>RichText</code></h3>
<ul>
<li>
<p>**应用场景：**一段文本存在多种样式（大小、颜色等），类似<code v-pre>Android</code>的<code v-pre>SpannableString</code></p>
</li>
<li>
<p><strong>属性设置：</strong></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token class-name">RichText</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token class-name">Key</span> key<span class="token punctuation">,</span>
    <span class="token metadata function">@required</span> <span class="token keyword">this</span><span class="token punctuation">.</span>text<span class="token punctuation">,</span> <span class="token comment">// 区别于Text，RichText的text属性不是String类型，而是TextSpan，TextSpan用于指定文本片段的风格及手势交互，具体如下描述</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>textAlign <span class="token operator">=</span> <span class="token class-name">TextAlign</span><span class="token punctuation">.</span>start<span class="token punctuation">,</span> <span class="token comment">// 文字对齐方式</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>textDirection<span class="token punctuation">,</span> <span class="token comment">// 文本方向（ltr从左至右，rtl从右至左）</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>softWrap <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否自动换行（true自动换行，false单行显示，超出屏幕部分默认截断处理）</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>overflow <span class="token operator">=</span> <span class="token class-name">TextOverflow</span><span class="token punctuation">.</span>clip<span class="token punctuation">,</span> <span class="token comment">// 文字超出屏幕之后的处理方式（clip裁剪，fade渐隐，ellipsis省略号）</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>textScaleFactor <span class="token operator">=</span> <span class="token number">1.0</span><span class="token punctuation">,</span><span class="token comment">// 字体显示倍率</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>maxLines<span class="token punctuation">,</span><span class="token comment">// maxLines 文字显示最大行数</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// TextSpan是一个树状结构，children表示子节点。每个节点代表一个文本片段，祖先节点的style对所有子孙节点起作用。</span>
<span class="token comment">// 注：当祖先节点的style中指定的值与自身节点的style发生冲突时，自身style中指定的值会覆盖掉前者</span>

<span class="token class-name">TextSpan</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>style<span class="token punctuation">,</span> <span class="token comment">// 指定风格，类似text中的style</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>text<span class="token punctuation">,</span> <span class="token comment">// String，指定文本片段</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>children<span class="token punctuation">,</span> <span class="token comment">// List&lt;TextSpan>类型，代表子节点，每个节点代表一个文本片段</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>recognizer<span class="token punctuation">,</span> <span class="token comment">// GestureRecognizer类型，指定该文本片段的手势交互，GestureRecognizer是一个抽象类（有许多子类，如点击监听器TapGestureRecognizer</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li>
<li>
<p><strong>代码演示：</strong></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">class</span> <span class="token class-name">MyRichText</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token class-name">MyRichText</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token class-name">RichText</span><span class="token punctuation">(</span>
      <span class="token comment">// 根节点的设置会影响下面两个子节点</span>
      text<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">TextSpan</span><span class="token punctuation">(</span>style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>fontSize<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">,</span> children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token comment">// 每个子节点的设置会覆盖根节点的设置</span>
        <span class="token class-name">TextSpan</span><span class="token punctuation">(</span>
          text<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">"Android "</span></span><span class="token punctuation">,</span>
          style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>
            color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">,</span>
            fontSize<span class="token punctuation">:</span> <span class="token number">60</span><span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token class-name">TextSpan</span><span class="token punctuation">(</span>
            text<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">"iOS "</span></span><span class="token punctuation">,</span>
            style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>
              color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>red<span class="token punctuation">,</span>
              fontSize<span class="token punctuation">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token class-name">TextSpan</span><span class="token punctuation">(</span>
            text<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">"Web"</span></span><span class="token punctuation">,</span>
            style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>
              color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>green<span class="token punctuation">,</span>
              fontSize<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      textDirection<span class="token punctuation">:</span> <span class="token class-name">TextDirection</span><span class="token punctuation">.</span>ltr<span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li>
<li>
<p><strong>特别注意：</strong></p>
<p><code v-pre>Text</code>控件中，有一个静态属性<code v-pre>rich</code>，可达到类似<code v-pre>RichText</code>的效果</p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token class-name">Text</span><span class="token punctuation">.</span><span class="token function">rich</span><span class="token punctuation">(</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>textSpan<span class="token punctuation">,</span> 
    <span class="token punctuation">{</span>
        <span class="token class-name">Key</span> key<span class="token punctuation">,</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>style<span class="token punctuation">,</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>strutStyle<span class="token punctuation">,</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>textAlign<span class="token punctuation">,</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>textDirection<span class="token punctuation">,</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>locale<span class="token punctuation">,</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>softWrap<span class="token punctuation">,</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>overflow<span class="token punctuation">,</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>textScaleFactor<span class="token punctuation">,</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>maxLines<span class="token punctuation">,</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>semanticsLabel<span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">)</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>深入<code v-pre>Text</code>的源码<code v-pre>build()</code>方法可知，<code v-pre>Text</code>控件实际上是对<code v-pre>RichText</code>控件的封装</p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code>  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
    <span class="token class-name">Widget</span> result <span class="token operator">=</span> <span class="token class-name">RichText</span><span class="token punctuation">(</span>
      <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
      text<span class="token punctuation">:</span> <span class="token class-name">TextSpan</span><span class="token punctuation">(</span>
        <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
        text<span class="token punctuation">:</span> data<span class="token punctuation">,</span>
        children<span class="token punctuation">:</span> textSpan <span class="token operator">!=</span> <span class="token keyword">null</span> <span class="token operator">?</span> <span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">TextSpan</span><span class="token punctuation">></span></span><span class="token punctuation">[</span>textSpan<span class="token punctuation">]</span> <span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
    <span class="token keyword">return</span> result<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li>
</ul>
<h3 id="_3-textfield" tabindex="-1"><a class="header-anchor" href="#_3-textfield" aria-hidden="true">#</a> 3. <code v-pre>TextField</code></h3>
<ul>
<li>
<p>**应用场景：**文本输入框，类似于<code v-pre>Android</code>中的<code v-pre>EditText</code></p>
</li>
<li>
<p><strong>属性说明：</strong></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">const</span> <span class="token class-name">TextField</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token class-name">Key</span> key<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>controller<span class="token punctuation">,</span>    <span class="token comment">//编辑框的控制器，跟文本框的交互一般都通过该属性完成，如果不创建的话默认会自动创建</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>focusNode<span class="token punctuation">,</span>  <span class="token comment">//用于管理焦点</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>decoration <span class="token operator">=</span> <span class="token keyword">const</span> <span class="token class-name">InputDecoration</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>   <span class="token comment">//输入框的装饰器，用来修改外观</span>
    <span class="token class-name">TextInputType</span> keyboardType<span class="token punctuation">,</span>   <span class="token comment">//设置输入类型，不同的输入类型键盘不一样</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>textInputAction<span class="token punctuation">,</span>   <span class="token comment">//用于控制键盘动作（一般位于右下角，默认是完成）</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>textCapitalization <span class="token operator">=</span> <span class="token class-name">TextCapitalization</span><span class="token punctuation">.</span>none<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>style<span class="token punctuation">,</span>    <span class="token comment">//输入的文本样式</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>textAlign <span class="token operator">=</span> <span class="token class-name">TextAlign</span><span class="token punctuation">.</span>start<span class="token punctuation">,</span>   <span class="token comment">//输入的文本位置</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>textDirection<span class="token punctuation">,</span>    <span class="token comment">//输入的文字排列方向，一般不会修改这个属性</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>autofocus <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>   <span class="token comment">//是否自动获取焦点</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>obscureText <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>   <span class="token comment">//是否隐藏输入的文字，一般用在密码输入框中</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>autocorrect <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">,</span>   <span class="token comment">//是否自动校验</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>maxLines <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span>   <span class="token comment">//最大行</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>maxLength<span class="token punctuation">,</span>   <span class="token comment">//能输入的最大字符个数</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>maxLengthEnforced <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">,</span>  <span class="token comment">//配合maxLength一起使用，在达到最大长度时是否阻止输入</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>onChanged<span class="token punctuation">,</span>  <span class="token comment">//输入文本发生变化时的回调</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>onEditingComplete<span class="token punctuation">,</span>   <span class="token comment">//点击键盘完成按钮时触发的回调，该回调没有参数，(){}</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>onSubmitted<span class="token punctuation">,</span>  <span class="token comment">//同样是点击键盘完成按钮时触发的回调，该回调有参数，参数即为当前输入框中的值。(String){}</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>inputFormatters<span class="token punctuation">,</span>   <span class="token comment">//对输入文本的校验</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>enabled<span class="token punctuation">,</span>    <span class="token comment">//输入框是否可用</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>cursorWidth <span class="token operator">=</span> <span class="token number">2.0</span><span class="token punctuation">,</span>  <span class="token comment">//光标的宽度</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>cursorRadius<span class="token punctuation">,</span>  <span class="token comment">//光标的圆角</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>cursorColor<span class="token punctuation">,</span>  <span class="token comment">//光标的颜色</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>keyboardAppearance<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>scrollPadding <span class="token operator">=</span> <span class="token keyword">const</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token number">20.0</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>dragStartBehavior <span class="token operator">=</span> <span class="token class-name">DragStartBehavior</span><span class="token punctuation">.</span>down<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>enableInteractiveSelection<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>onTap<span class="token punctuation">,</span>    <span class="token comment">//点击输入框时的回调(){}</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>buildCounter<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 此处主要介绍TextField.decoration属性</span>
<span class="token class-name">InputDecoration</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>icon<span class="token punctuation">,</span>    <span class="token comment">//位于装饰器外部和输入框前面的图片</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>labelText<span class="token punctuation">,</span>  <span class="token comment">//用于描述输入框，例如这个输入框是用来输入用户名还是密码的，当输入框获取焦点时默认会浮动到上方，</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>labelStyle<span class="token punctuation">,</span>  <span class="token comment">// 控制labelText的样式,接收一个TextStyle类型的值</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>helperText<span class="token punctuation">,</span> <span class="token comment">//辅助文本，位于输入框下方，如果errorText不为空的话，则helperText不会显示</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>helperStyle<span class="token punctuation">,</span> <span class="token comment">//helperText的样式</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>hintText<span class="token punctuation">,</span>  <span class="token comment">//提示文本，位于输入框内部</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>hintStyle<span class="token punctuation">,</span> <span class="token comment">//hintText的样式</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>hintMaxLines<span class="token punctuation">,</span> <span class="token comment">//提示信息最大行数</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>errorText<span class="token punctuation">,</span>  <span class="token comment">//错误信息提示</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>errorStyle<span class="token punctuation">,</span> <span class="token comment">//errorText的样式</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>errorMaxLines<span class="token punctuation">,</span>   <span class="token comment">//errorText最大行数</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>hasFloatingPlaceholder <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">,</span>  <span class="token comment">//labelText是否浮动，默认为true，修改为false则labelText在输入框获取焦点时不会浮动且不显示</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>isDense<span class="token punctuation">,</span>   <span class="token comment">//改变输入框是否为密集型，默认为false，修改为true时，图标及间距会变小</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>contentPadding<span class="token punctuation">,</span> <span class="token comment">//内间距</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>prefixIcon<span class="token punctuation">,</span>  <span class="token comment">//位于输入框内部起始位置的图标。</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>prefix<span class="token punctuation">,</span>   <span class="token comment">//预先填充的Widget,跟prefixText同时只能出现一个</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>prefixText<span class="token punctuation">,</span>  <span class="token comment">//预填充的文本，例如手机号前面预先加上区号等</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>prefixStyle<span class="token punctuation">,</span>  <span class="token comment">//prefixText的样式</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>suffixIcon<span class="token punctuation">,</span> <span class="token comment">//位于输入框后面的图片,例如一般输入框后面会有个眼睛，控制输入内容是否明文</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>suffix<span class="token punctuation">,</span>  <span class="token comment">//位于输入框尾部的控件，同样的不能和suffixText同时使用</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>suffixText<span class="token punctuation">,</span><span class="token comment">//位于尾部的填充文字</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>suffixStyle<span class="token punctuation">,</span>  <span class="token comment">//suffixText的样式</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>counter<span class="token punctuation">,</span><span class="token comment">//位于输入框右下方的小控件，不能和counterText同时使用</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>counterText<span class="token punctuation">,</span><span class="token comment">//位于右下方显示的文本，常用于显示输入的字符数量</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>counterStyle<span class="token punctuation">,</span> <span class="token comment">//counterText的样式</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>filled<span class="token punctuation">,</span>  <span class="token comment">//如果为true，则输入使用fillColor指定的颜色填充</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>fillColor<span class="token punctuation">,</span>  <span class="token comment">//相当于输入框的背景颜色</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>errorBorder<span class="token punctuation">,</span>   <span class="token comment">//errorText不为空，输入框没有焦点时要显示的边框</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>focusedBorder<span class="token punctuation">,</span>  <span class="token comment">//输入框有焦点时的边框,如果errorText不为空的话，该属性无效</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>focusedErrorBorder<span class="token punctuation">,</span>  <span class="token comment">//errorText不为空时，输入框有焦点时的边框</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>disabledBorder<span class="token punctuation">,</span>  <span class="token comment">//输入框禁用时显示的边框，如果errorText不为空的话，该属性无效</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>enabledBorder<span class="token punctuation">,</span>  <span class="token comment">//输入框可用时显示的边框，如果errorText不为空的话，该属性无效</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>border<span class="token punctuation">,</span> <span class="token comment">//正常情况下的border</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>enabled <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">,</span>  <span class="token comment">//输入框是否可用</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>semanticCounterText<span class="token punctuation">,</span>  
    <span class="token keyword">this</span><span class="token punctuation">.</span>alignLabelWithHint<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li>
<li>
<p><strong>代码演示：</strong></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">class</span> <span class="token class-name">MyTextField</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token class-name">MyTextField</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">const</span> <span class="token class-name">TextField</span><span class="token punctuation">(</span>
      <span class="token comment">// obscureText: true,</span>
      decoration<span class="token punctuation">:</span> <span class="token class-name">InputDecoration</span><span class="token punctuation">(</span>
        icon<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>person<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 输入框前加入图片</span>
        hintText<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">"MyTextField"</span></span><span class="token punctuation">,</span> <span class="token comment">// 提示输入信息</span>
        border<span class="token punctuation">:</span> <span class="token class-name">OutlineInputBorder</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        labelText<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">'MyTextField'</span></span><span class="token punctuation">,</span> <span class="token comment">// 描述输入框，当输入框获取焦点时默认会浮动到上方</span>
        labelStyle<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>
          <span class="token comment">// labelText的样式</span>
          color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">,</span>
          fontSize<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
        counterText<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">"counterText"</span></span><span class="token punctuation">,</span> <span class="token comment">// 输入框右下方文字</span>
        helperText<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">"helperText"</span></span><span class="token punctuation">,</span> <span class="token comment">// 输入框下方提示</span>
        helperStyle<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>
          <span class="token comment">// 输入框下方提示样式</span>
          color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>green<span class="token punctuation">,</span> <span class="token comment">//绿色</span>
          fontSize<span class="token punctuation">:</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token comment">//字体变大</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
        prefixIcon<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>perm_identity<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 输入框前端预填充图片</span>
        prefixText<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">"prefixText"</span></span><span class="token punctuation">,</span> <span class="token comment">// 预填充文字</span>
        suffixIcon<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span>
          <span class="token class-name">Icons</span><span class="token punctuation">.</span>remove_red_eye<span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 输入框后端预填充图片</span>
        suffixText<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">"suffixText"</span></span><span class="token punctuation">,</span> <span class="token comment">// 输入框后端预填充文字</span>
        filled<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 颜色填充</span>
        fillColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>grey<span class="token punctuation">,</span>
        <span class="token comment">// 边界设置 - 外边界</span>
        enabledBorder<span class="token punctuation">:</span> <span class="token class-name">OutlineInputBorder</span><span class="token punctuation">(</span>
          <span class="token comment">/*边角*/</span>
          borderRadius<span class="token punctuation">:</span> <span class="token class-name">BorderRadius</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>
            <span class="token class-name">Radius</span><span class="token punctuation">.</span><span class="token function">circular</span><span class="token punctuation">(</span><span class="token number">30</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">//边角为30</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          borderSide<span class="token punctuation">:</span> <span class="token class-name">BorderSide</span><span class="token punctuation">(</span>
            color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>amber<span class="token punctuation">,</span> <span class="token comment">//边线颜色为黄色</span>
            width<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token comment">//边线宽度为2</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
        focusedBorder<span class="token punctuation">:</span> <span class="token class-name">OutlineInputBorder</span><span class="token punctuation">(</span>
            borderSide<span class="token punctuation">:</span> <span class="token class-name">BorderSide</span><span class="token punctuation">(</span>
              color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>green<span class="token punctuation">,</span> <span class="token comment">//边框颜色为绿色</span>
              width<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token comment">//宽度为5</span>
            <span class="token punctuation">)</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token comment">// errorText: "errorText", // 错误提示，若该属性不为null，那么labelText失效\// 边界设置 - 底边界</span>
        <span class="token comment">// errorBorder: UnderlineInputBorder(</span>
        <span class="token comment">//   /*边角*/</span>
        <span class="token comment">//   borderRadius: BorderRadius.all(</span>
        <span class="token comment">//     Radius.circular(30), //边角为30</span>
        <span class="token comment">//   ),</span>
        <span class="token comment">//   borderSide: BorderSide(</span>
        <span class="token comment">//     color: Colors.amber, //边线颜色为黄色</span>
        <span class="token comment">//     width: 2, //边线宽度为2</span>
        <span class="token comment">//   ),</span>
        <span class="token comment">// ),</span>
        <span class="token comment">// focusedErrorBorder: UnderlineInputBorder(</span>
        <span class="token comment">//     borderSide: BorderSide(</span>
        <span class="token comment">//       color: Colors.green, //边框颜色为绿色</span>
        <span class="token comment">//       width: 5, //宽度为5</span>
        <span class="token comment">//     )</span>
        <span class="token comment">// ),</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
      keyboardType<span class="token punctuation">:</span> <span class="token class-name">TextInputType</span><span class="token punctuation">.</span>phone<span class="token punctuation">,</span> <span class="token comment">// 键盘类型</span>
      textInputAction<span class="token punctuation">:</span> <span class="token class-name">TextInputAction</span><span class="token punctuation">.</span>search<span class="token punctuation">,</span> <span class="token comment">// 键盘动作的按钮变为搜索</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li>
</ul>
<h2 id="图片组件image、icon、imageicon" tabindex="-1"><a class="header-anchor" href="#图片组件image、icon、imageicon" aria-hidden="true">#</a> 图片组件<code v-pre>Image</code>、<code v-pre>Icon</code>、<code v-pre>ImageIcon</code></h2>
<h3 id="_1-image" tabindex="-1"><a class="header-anchor" href="#_1-image" aria-hidden="true">#</a> 1. Image</h3>
<ul>
<li><strong>作用</strong></li>
</ul>
<p>显示图片，主要支持的加载方式：本地图片、资源图片 &amp; 网络图片。</p>
<ul>
<li><strong>常用属性</strong></li>
</ul>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">const</span> <span class="token class-name">Image</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token class-name">Key</span> key<span class="token punctuation">,</span>
    <span class="token metadata function">@required</span> <span class="token keyword">this</span><span class="token punctuation">.</span>image<span class="token punctuation">,</span><span class="token comment">// ImageProvider，必填参数，接收一个ImageProvider 类型的值</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>semanticLabel<span class="token punctuation">,</span> <span class="token comment">// String，图片的描述</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>excludeFromSemantics <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// bool，是否从语义上排除该图片，默认值为false</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>width<span class="token punctuation">,</span> <span class="token comment">// double，图片的宽度</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>height<span class="token punctuation">,</span> <span class="token comment">// double，图片的高度</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>color<span class="token punctuation">,</span> <span class="token comment">// Color，图片的前景色，一般不设置或设置透明色，会覆盖掉图片，一般会和colorBlendMode结合使用</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>colorBlendMode<span class="token punctuation">,</span> <span class="token comment">// BlendMode，一般和color结合使用，设置color的混合模式</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>fit<span class="token punctuation">,</span> <span class="token comment">// BoxFit，设置图片的显示模式</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>alignment <span class="token operator">=</span> <span class="token class-name">Alignment</span><span class="token punctuation">.</span>center<span class="token punctuation">,</span> <span class="token comment">// AlignmentGeometry，用于设置图片的对齐方式，默认值：Alignment.center</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>repeat <span class="token operator">=</span> <span class="token class-name">ImageRepeat</span><span class="token punctuation">.</span>noRepeat<span class="token punctuation">,</span> <span class="token comment">// ImageRepeat，图片的重复方式，当图片没有完全覆盖掉容器时使用。默认值：ImageRepeat.noRepeat</span>
    <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul>
<li><strong>属性image</strong></li>
</ul>
<ol>
<li>
<p>接收一个<code v-pre>ImageProvider</code>类型的值。<code v-pre>ImageProvider</code>是一个抽象类</p>
</li>
<li>
<p>实现类主要包括：<strong><code v-pre>AssetImage</code>、<code v-pre>MemoryImage</code>、<code v-pre>NetworkImage</code>、<code v-pre>FileImage</code></strong>，分别表示可从资源、内存、网络 &amp; 文件中获取图片</p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token comment">// 加载网络图片</span>
<span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">network</span><span class="token punctuation">(</span><span class="token class-name">String</span> src<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token class-name">Key</span> key<span class="token punctuation">,</span>
    double scale <span class="token operator">=</span> <span class="token number">1.0</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>semanticLabel<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>excludeFromSemantics <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>width<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>height<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>color<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>colorBlendMode<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>fit<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>alignment <span class="token operator">=</span> <span class="token class-name">Alignment</span><span class="token punctuation">.</span>center<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>repeat <span class="token operator">=</span> <span class="token class-name">ImageRepeat</span><span class="token punctuation">.</span>noRepeat<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>centerSlice<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>matchTextDirection <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>gaplessPlayback <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>filterQuality <span class="token operator">=</span> <span class="token class-name">FilterQuality</span><span class="token punctuation">.</span>low<span class="token punctuation">,</span>
    <span class="token class-name">Map</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">String</span><span class="token punctuation">,</span> <span class="token class-name">String</span><span class="token punctuation">></span></span> headers<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 加载本地文件</span>
  <span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">file</span><span class="token punctuation">(</span><span class="token class-name">File</span> file<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token class-name">Key</span> key<span class="token punctuation">,</span>
    double scale <span class="token operator">=</span> <span class="token number">1.0</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>semanticLabel<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>excludeFromSemantics <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>width<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>height<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>color<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>colorBlendMode<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>fit<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>alignment <span class="token operator">=</span> <span class="token class-name">Alignment</span><span class="token punctuation">.</span>center<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>repeat <span class="token operator">=</span> <span class="token class-name">ImageRepeat</span><span class="token punctuation">.</span>noRepeat<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>centerSlice<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>matchTextDirection <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>gaplessPlayback <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>filterQuality <span class="token operator">=</span> <span class="token class-name">FilterQuality</span><span class="token punctuation">.</span>low<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 从项目资源中加载</span>
<span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">asset</span><span class="token punctuation">(</span><span class="token class-name">String</span> name<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token class-name">Key</span> key<span class="token punctuation">,</span>
    <span class="token class-name">AssetBundle</span> bundle<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>semanticLabel<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>excludeFromSemantics <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    double scale<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>width<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>height<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>color<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>colorBlendMode<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>fit<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>alignment <span class="token operator">=</span> <span class="token class-name">Alignment</span><span class="token punctuation">.</span>center<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>repeat <span class="token operator">=</span> <span class="token class-name">ImageRepeat</span><span class="token punctuation">.</span>noRepeat<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>centerSlice<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>matchTextDirection <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>gaplessPlayback <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token class-name">String</span> package<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>filterQuality <span class="token operator">=</span> <span class="token class-name">FilterQuality</span><span class="token punctuation">.</span>low<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 从内存中加载</span>
 <span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">memory</span><span class="token punctuation">(</span><span class="token class-name">Uint8List</span> bytes<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token class-name">Key</span> key<span class="token punctuation">,</span>
    double scale <span class="token operator">=</span> <span class="token number">1.0</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>semanticLabel<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>excludeFromSemantics <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>width<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>height<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>color<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>colorBlendMode<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>fit<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>alignment <span class="token operator">=</span> <span class="token class-name">Alignment</span><span class="token punctuation">.</span>center<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>repeat <span class="token operator">=</span> <span class="token class-name">ImageRepeat</span><span class="token punctuation">.</span>noRepeat<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>centerSlice<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>matchTextDirection <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>gaplessPlayback <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>filterQuality <span class="token operator">=</span> <span class="token class-name">FilterQuality</span><span class="token punctuation">.</span>low<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>为了方便使用，在Image的构造方法里也加入了快速从各种不同途径获得图片的方式，Image的构造方法包括：</p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token class-name">Image</span><span class="token punctuation">(</span><span class="token punctuation">)</span>  <span class="token comment">// 通用方法，使用ImageProvider实现，如下方法本质上也是使用的这个方法</span>
<span class="token class-name">Image</span><span class="token punctuation">.</span>asset <span class="token comment">// 加载资源图片</span>
<span class="token class-name">Image</span><span class="token punctuation">.</span>file  <span class="token comment">// 加载本地图片文件</span>
<span class="token class-name">Image</span><span class="token punctuation">.</span>network  <span class="token comment">// 加载网络图片</span>
<span class="token class-name">Image</span><span class="token punctuation">.</span>memory   <span class="token comment">// 加载Uint8List资源图片</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token comment">// 获得资源图片</span>
<span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">asset</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'imgs/logo.jpeg'</span></span><span class="token punctuation">)</span>

<span class="token comment">// 获得网络图片</span>
<span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">network</span><span class="token punctuation">(</span>
  <span class="token string-literal"><span class="token string">'https://flutter.io/images/homepage/header-illustration.png'</span></span><span class="token punctuation">)</span>

<span class="token comment">// 获得本地文件图片</span>
<span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">file</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">File</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"/Users/gs/Downloads/1.jpeg"</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span>

<span class="token comment">// 获得Uint8List图片</span>
<span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">memory</span><span class="token punctuation">(</span>bytes<span class="token punctuation">)</span>

<span class="token comment">// 获得使用ImageProvider加载图片</span>
<span class="token class-name">Image</span><span class="token punctuation">(</span>image<span class="token punctuation">:</span> <span class="token class-name">NetworkImage</span><span class="token punctuation">(</span>
  <span class="token string-literal"><span class="token string">"https://flutter.io/images/homepage/screenshot-2.png"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul>
<li>
<p>步骤1：创建一个文件夹存放图片</p>
<p>此处创建的是文件夹名 = <code v-pre>assetImage</code>，放了一个名为<code v-pre>photo.jpg</code>的图片</p>
</li>
<li>
<p><strong>步骤2：在<code v-pre>pubspec.yaml</code>中声明资源</strong></p>
<p>注：声明时路径和前面的- 存在间隔</p>
</li>
<li>
<p><strong>步骤3：加载时填写正确资源路径</strong></p>
<div class="language-text line-numbers-mode" data-ext="text"><pre v-pre class="language-text"><code>// 获得资源图片
Image.asset('assetImage/photo.jpg')
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div></li>
</ul>
</li>
</ol>
<h4 id="属性width-height、fit" tabindex="-1"><a class="header-anchor" href="#属性width-height、fit" aria-hidden="true">#</a> 属性width &amp; height、fit</h4>
<p><img src="@source/blog/Flutter/assets/944365-da7ae2eebe04406d.webp" alt="image_width"></p>
<h4 id="属性color、colorblendmode" tabindex="-1"><a class="header-anchor" href="#属性color、colorblendmode" aria-hidden="true">#</a> 属性<code v-pre>color</code>、<code v-pre>colorBlendMode</code></h4>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">this</span><span class="token punctuation">.</span>color
<span class="token comment">// Color，图片的前景色，一般不设置或设置透明色，会覆盖掉图片，一般会和colorBlendMode结合使用</span>

<span class="token keyword">this</span><span class="token punctuation">.</span>colorBlendMode
<span class="token comment">// BlendMode，一般和color结合使用，设置color的混合模式</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="属性alignment" tabindex="-1"><a class="header-anchor" href="#属性alignment" aria-hidden="true">#</a> 属性alignment</h4>
<div class="language-text line-numbers-mode" data-ext="text"><pre v-pre class="language-text"><code>this.alignment = Alignment.center
// AlignmentGeometry，用于设置图片的对齐方式，默认值：Alignment.center
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="属性repeat" tabindex="-1"><a class="header-anchor" href="#属性repeat" aria-hidden="true">#</a> 属性Repeat</h4>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">this</span><span class="token punctuation">.</span>repeat <span class="token operator">=</span> <span class="token class-name">ImageRepeat</span><span class="token punctuation">.</span>noRepeat
<span class="token comment">// ImageRepeat，图片的重复方式，当图片没有完全覆盖掉容器时使用。默认值：ImageRepeat.noRepeat</span>

<span class="token comment">// 枚举类型</span>
repeat <span class="token comment">// 1. 在x轴和y轴重复</span>
repeatX <span class="token comment">// 2. 在x轴重复</span>
repeatY <span class="token comment">// 3. 在y轴重复</span>
noRepeat <span class="token comment">// 4. 不重复</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_2-icon" tabindex="-1"><a class="header-anchor" href="#_2-icon" aria-hidden="true">#</a> 2. Icon</h3>
<ul>
<li>
<p><strong>作用</strong></p>
<p>显示图标图片</p>
</li>
<li>
<p><strong>优势（相对于Image</strong>）</p>
<ul>
<li>体积小：可以减小安装包大小。</li>
<li>矢量：矢量图标，放大不会影响其清晰度。</li>
<li>可应用文本样式：可以像文本一样改变字体图标的颜色、大小对齐等 &amp; 可通过TextSpan和文本混用</li>
</ul>
</li>
<li>
<p><strong>构造方法</strong></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code> <span class="token keyword">const</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>icon<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token class-name">Key</span> key<span class="token punctuation">,</span> <span class="token comment">// 设置使用的图标</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>size<span class="token punctuation">,</span> <span class="token comment">// 图标大小</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>color<span class="token punctuation">,</span> <span class="token comment">// 颜色</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>textDirection<span class="token punctuation">,</span> <span class="token comment">// 渲染图标的文本方向</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li>
<li>
<p><strong>具体使用</strong></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">void</span> <span class="token function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">runApp</span><span class="token punctuation">(</span><span class="token class-name">MyApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 无状态控件显示</span>
<span class="token keyword">class</span> <span class="token class-name">MyApp</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 主界面入口返回的组件 = MaterialApp</span>
    <span class="token keyword">return</span> <span class="token class-name">MaterialApp</span><span class="token punctuation">(</span>
      title<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">'Widget_Demo'</span></span><span class="token punctuation">,</span> <span class="token comment">//标题</span>
      theme<span class="token punctuation">:</span> <span class="token class-name">ThemeData</span><span class="token punctuation">(</span>primarySwatch<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">//主题色</span>
      home<span class="token punctuation">:</span> <span class="token class-name">MyHomePage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 返回一个Widget对象，用来定义当前应用打开的时候，所显示的界面</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// 返回的Widget对象</span>
<span class="token keyword">class</span> <span class="token class-name">MyHomePage</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token class-name">Scaffold</span><span class="token punctuation">(</span>
      <span class="token comment">//设置appbar</span>
      appBar<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">AppBar</span><span class="token punctuation">(</span>
        title<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'Flutter Demo'</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token comment">//主体</span>
        body<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span>
          <span class="token class-name">Icons</span><span class="token punctuation">.</span>camera<span class="token punctuation">,</span>
          size<span class="token punctuation">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
          color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>red<span class="token punctuation">,</span>
          textDirection<span class="token punctuation">:</span> <span class="token class-name">TextDirection</span><span class="token punctuation">.</span>ltr<span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li>
</ul>
<h4 id="flutter中借助阿里巴巴图标库自定义字体图标" tabindex="-1"><a class="header-anchor" href="#flutter中借助阿里巴巴图标库自定义字体图标" aria-hidden="true">#</a> <strong>Flutter中借助阿里巴巴图标库自定义字体图标</strong></h4>
<p>我们也可以使用自定义字体图标。阿里巴巴图标库官网 <code v-pre>iconfont.cn</code>上有很多字体图标素材，我们可以
选择自己需要的图标打包下载后，会生成一些不同格式的字体文件，在Flutter中，我们使用ttf格式即
可。
假设我们项目中需要使用一个书籍图标和微信图标，我们打包下载后导入：</p>
<ol>
<li>导入字体图标文件；这一步和导入字体文件相同，假设我们的字体图标文件保存在项目根目录下，
路径为<code v-pre>&quot;fonts/iconfont.ttf&quot;</code>：</li>
</ol>
<div class="language-yaml line-numbers-mode" data-ext="yml"><pre v-pre class="language-yaml"><code><span class="token key atrule">fonts</span><span class="token punctuation">:</span>
  <span class="token punctuation">-</span> <span class="token key atrule">family</span><span class="token punctuation">:</span> myIcon <span class="token comment">#指定一个字体名</span>
  <span class="token key atrule">fonts</span><span class="token punctuation">:</span>
  <span class="token punctuation">-</span> <span class="token key atrule">asset</span><span class="token punctuation">:</span> fonts/iconfont.ttf
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>也可以配置多个字体文件：</p>
<div class="language-yaml line-numbers-mode" data-ext="yml"><pre v-pre class="language-yaml"><code><span class="token key atrule">fonts</span><span class="token punctuation">:</span>
  <span class="token punctuation">-</span> <span class="token key atrule">family</span><span class="token punctuation">:</span> myIcon <span class="token comment">#指定一个字体名</span>
      <span class="token key atrule">fonts</span><span class="token punctuation">:</span>
      <span class="token punctuation">-</span> <span class="token key atrule">asset</span><span class="token punctuation">:</span> fonts/iconfont.ttf
  <span class="token punctuation">-</span> <span class="token key atrule">family</span><span class="token punctuation">:</span> alipayIcon <span class="token comment">#指定一个字体名</span>
      <span class="token key atrule">fonts</span><span class="token punctuation">:</span>
          <span class="token punctuation">-</span> <span class="token key atrule">asset</span><span class="token punctuation">:</span> fonts/iconfont2.ttf
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="2">
<li>为了使用方便，我们定义一个 <code v-pre>MyIcons</code> 类，功能和 <code v-pre>Icons</code> 类一样：将字体文件中的所有图标都定义
成静态变量：</li>
</ol>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">class</span> <span class="token class-name">MyIcons</span><span class="token punctuation">{</span>
  <span class="token comment">// book 图标</span>
  <span class="token keyword">static</span> <span class="token keyword">const</span> <span class="token class-name">IconData</span> book <span class="token operator">=</span> <span class="token class-name">IconData</span><span class="token punctuation">(</span>
      <span class="token number">0xe614</span><span class="token punctuation">,</span>
      fontFamily<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">'myIcon'</span></span><span class="token punctuation">,</span>
      matchTextDirection<span class="token punctuation">:</span> <span class="token boolean">true</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">// 微信图标</span>
  <span class="token keyword">static</span> <span class="token keyword">const</span> <span class="token class-name">IconData</span> wechat <span class="token operator">=</span> <span class="token class-name">IconData</span><span class="token punctuation">(</span>
      <span class="token number">0xec7d</span><span class="token punctuation">,</span>
      fontFamily<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">'myIcon'</span></span><span class="token punctuation">,</span>
      matchTextDirection<span class="token punctuation">:</span> <span class="token boolean">true</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="3">
<li>使用</li>
</ol>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token class-name">Row</span><span class="token punctuation">(</span>
  mainAxisAlignment<span class="token punctuation">:</span> <span class="token class-name">MainAxisAlignment</span><span class="token punctuation">.</span>center<span class="token punctuation">,</span>
  children<span class="token punctuation">:</span> <span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Widget</span><span class="token punctuation">></span></span><span class="token punctuation">[</span>
      <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">MyIcons</span><span class="token punctuation">.</span>book<span class="token punctuation">,</span>color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>purple<span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">MyIcons</span><span class="token punctuation">.</span>wechat<span class="token punctuation">,</span>color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>green<span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_3-imageicon" tabindex="-1"><a class="header-anchor" href="#_3-imageicon" aria-hidden="true">#</a> 3. <code v-pre>ImageIcon</code></h3>
<ul>
<li>
<p><strong>作用</strong></p>
<p>自定义图形图标，来自于图片绘制。图标不可交互式。</p>
</li>
<li>
<p><strong>构造函数</strong></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">const</span> <span class="token class-name">ImageIcon</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>image<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token class-name">Key</span> key<span class="token punctuation">,</span> 
    <span class="token keyword">this</span><span class="token punctuation">.</span>size<span class="token punctuation">,</span> <span class="token comment">// 图标大小</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>color<span class="token punctuation">,</span> <span class="token comment">// 颜色</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul>
<li>
<p>区别于<code v-pre>Icon</code>，<code v-pre>ImageIcon</code>是采用自定义<code v-pre>ImageProvider</code>来定义图标</p>
</li>
<li>
<p>自定义<code v-pre>ImageProvider</code>分别是上面讲解<code v-pre>Image</code>的：<code v-pre>AssetImage</code>、<code v-pre>MemoryImage</code>、<code v-pre>NetworkImage</code>、<code v-pre>FileImage</code>，即分别表示可从资源、内存、网络 &amp; 文件中获取图片</p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token comment">// 加载网络图片</span>
<span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">network</span><span class="token punctuation">(</span><span class="token class-name">String</span> src<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token class-name">Key</span> key<span class="token punctuation">,</span>
    double scale <span class="token operator">=</span> <span class="token number">1.0</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>semanticLabel<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>excludeFromSemantics <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>width<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>height<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>color<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>colorBlendMode<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>fit<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>alignment <span class="token operator">=</span> <span class="token class-name">Alignment</span><span class="token punctuation">.</span>center<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>repeat <span class="token operator">=</span> <span class="token class-name">ImageRepeat</span><span class="token punctuation">.</span>noRepeat<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>centerSlice<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>matchTextDirection <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>gaplessPlayback <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>filterQuality <span class="token operator">=</span> <span class="token class-name">FilterQuality</span><span class="token punctuation">.</span>low<span class="token punctuation">,</span>
    <span class="token class-name">Map</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">String</span><span class="token punctuation">,</span> <span class="token class-name">String</span><span class="token punctuation">></span></span> headers<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 加载本地文件</span>
  <span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">file</span><span class="token punctuation">(</span><span class="token class-name">File</span> file<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token class-name">Key</span> key<span class="token punctuation">,</span>
    double scale <span class="token operator">=</span> <span class="token number">1.0</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>semanticLabel<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>excludeFromSemantics <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>width<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>height<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>color<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>colorBlendMode<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>fit<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>alignment <span class="token operator">=</span> <span class="token class-name">Alignment</span><span class="token punctuation">.</span>center<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>repeat <span class="token operator">=</span> <span class="token class-name">ImageRepeat</span><span class="token punctuation">.</span>noRepeat<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>centerSlice<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>matchTextDirection <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>gaplessPlayback <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>filterQuality <span class="token operator">=</span> <span class="token class-name">FilterQuality</span><span class="token punctuation">.</span>low<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 从项目资源中加载</span>
<span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">asset</span><span class="token punctuation">(</span><span class="token class-name">String</span> name<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token class-name">Key</span> key<span class="token punctuation">,</span>
    <span class="token class-name">AssetBundle</span> bundle<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>semanticLabel<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>excludeFromSemantics <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    double scale<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>width<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>height<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>color<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>colorBlendMode<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>fit<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>alignment <span class="token operator">=</span> <span class="token class-name">Alignment</span><span class="token punctuation">.</span>center<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>repeat <span class="token operator">=</span> <span class="token class-name">ImageRepeat</span><span class="token punctuation">.</span>noRepeat<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>centerSlice<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>matchTextDirection <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>gaplessPlayback <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token class-name">String</span> package<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>filterQuality <span class="token operator">=</span> <span class="token class-name">FilterQuality</span><span class="token punctuation">.</span>low<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 从内存中加载</span>
 <span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">memory</span><span class="token punctuation">(</span><span class="token class-name">Uint8List</span> bytes<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token class-name">Key</span> key<span class="token punctuation">,</span>
    double scale <span class="token operator">=</span> <span class="token number">1.0</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>semanticLabel<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>excludeFromSemantics <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>width<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>height<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>color<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>colorBlendMode<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>fit<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>alignment <span class="token operator">=</span> <span class="token class-name">Alignment</span><span class="token punctuation">.</span>center<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>repeat <span class="token operator">=</span> <span class="token class-name">ImageRepeat</span><span class="token punctuation">.</span>noRepeat<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>centerSlice<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>matchTextDirection <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>gaplessPlayback <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>filterQuality <span class="token operator">=</span> <span class="token class-name">FilterQuality</span><span class="token punctuation">.</span>low<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 为了方便使用，在Image的构造方法里也加入了快速从各种不同途径获得图片的方式，Image的构造方法包括：</span>
<span class="token class-name">Image</span><span class="token punctuation">(</span><span class="token punctuation">)</span>  <span class="token comment">// 通用方法，使用ImageProvider实现，如下方法本质上也是使用的这个方法</span>
<span class="token class-name">Image</span><span class="token punctuation">.</span>asset <span class="token comment">// 加载资源图片</span>
<span class="token class-name">Image</span><span class="token punctuation">.</span>file  <span class="token comment">// 加载本地图片文件</span>
<span class="token class-name">Image</span><span class="token punctuation">.</span>network  <span class="token comment">// 加载网络图片</span>
<span class="token class-name">Image</span><span class="token punctuation">.</span>memory   <span class="token comment">// 加载Uint8List资源图片</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li>
</ul>
</li>
<li>
<p><strong>具体使用</strong></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">class</span> <span class="token class-name">MyImageIcon</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token class-name">MyImageIcon</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">const</span> <span class="token class-name">ImageIcon</span><span class="token punctuation">(</span>
      <span class="token class-name">AssetImage</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'static/images/ImageIcon.png'</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 注：此处的图片格式必须是.png</span>
      color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>green<span class="token punctuation">,</span>
      size<span class="token punctuation">:</span> <span class="token number">132</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li>
</ul>
<h2 id="listview-列表组件" tabindex="-1"><a class="header-anchor" href="#listview-列表组件" aria-hidden="true">#</a> <code v-pre>ListView</code> 列表组件</h2>
<p>列表布局是我们项目开发中最常用的一种布局方式。<code v-pre>Flutter</code>中我们可以通过<code v-pre>ListView</code>来定义列表项，支
持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。列表有以下分类：</p>
<ol>
<li>垂直列表</li>
<li>垂直图文列表</li>
<li>水平列表</li>
<li>动态列表</li>
</ol>
<h3 id="列表组件常用参数" tabindex="-1"><a class="header-anchor" href="#列表组件常用参数" aria-hidden="true">#</a> <strong>列表组件常用参数：</strong></h3>
<table>
<thead>
<tr>
<th>名称</th>
<th>类型</th>
<th style="text-align:left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code v-pre>scrollDirection</code></td>
<td><code v-pre>Axis</code></td>
<td style="text-align:left"><code v-pre>Axis.horizontal</code>水平列表<code v-pre>Axis.vertical</code>垂直列表</td>
</tr>
<tr>
<td><code v-pre>padding</code></td>
<td><code v-pre>EdgeInsetsGeometry</code></td>
<td style="text-align:left">内边距</td>
</tr>
<tr>
<td><code v-pre>resolve</code></td>
<td><code v-pre>bool</code></td>
<td style="text-align:left">组件反向排序</td>
</tr>
<tr>
<td><code v-pre>children</code></td>
<td><code v-pre>List</code></td>
<td style="text-align:left">列表元素</td>
</tr>
</tbody>
</table>
<h3 id="垂直列表" tabindex="-1"><a class="header-anchor" href="#垂直列表" aria-hidden="true">#</a> <strong>垂直列表：</strong></h3>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">class</span> <span class="token class-name">MyListView</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token class-name">MyListView</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token class-name">Scaffold</span><span class="token punctuation">(</span>
      appBar<span class="token punctuation">:</span> <span class="token class-name">AppBar</span><span class="token punctuation">(</span>title<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"ListView组件"</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      body<span class="token punctuation">:</span> <span class="token class-name">ListView</span><span class="token punctuation">(</span>
        padding<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">fromLTRB</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        children<span class="token punctuation">:</span> <span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Widget</span><span class="token punctuation">></span></span><span class="token punctuation">[</span>
          <span class="token keyword">const</span> <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
            leading<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span>
              <span class="token class-name">Icons</span><span class="token punctuation">.</span>assessment<span class="token punctuation">,</span>
              color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>red<span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"全部订单"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            trailing<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>chevron_right_sharp<span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token keyword">const</span> <span class="token class-name">Divider</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
            leading<span class="token punctuation">:</span> <span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">network</span><span class="token punctuation">(</span>
              <span class="token string-literal"><span class="token string">"https://pics4.baidu.com/feed/a8014c086e061d954c3c74a83f412add63d9ca6d.jpeg@f_auto?token=7acfa4966e5f2a3ddfe120768aebc174"</span></span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            title<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span>
              <span class="token string-literal"><span class="token string">"重庆狼队让二追四跻身春决，妖刀有望创造历史"</span></span><span class="token punctuation">,</span>
              softWrap<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
              overflow<span class="token punctuation">:</span> <span class="token class-name">TextOverflow</span><span class="token punctuation">.</span>ellipsis<span class="token punctuation">,</span>
              style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>textBaseline<span class="token punctuation">:</span> <span class="token class-name">TextBaseline</span><span class="token punctuation">.</span>ideographic<span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            subtitle<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span>
              <span class="token string-literal"><span class="token string">"新京报讯（记者赵雪）5月5日晚，2023KPL（王者荣耀职业联赛）春季赛季后赛继续进行，胜者组决赛的战斗在北京WB和重庆狼队之间打响。期待中的巅峰对决没有上演，狼队在落后两局的情况下连拿四分，率先拿到总决赛门票。"</span></span><span class="token punctuation">,</span>
              softWrap<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
              textAlign<span class="token punctuation">:</span> <span class="token class-name">TextAlign</span><span class="token punctuation">.</span>left<span class="token punctuation">,</span>
              overflow<span class="token punctuation">:</span> <span class="token class-name">TextOverflow</span><span class="token punctuation">.</span>ellipsis<span class="token punctuation">,</span>
              maxLines<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token keyword">const</span> <span class="token class-name">Divider</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
            title<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span>
              <span class="token string-literal"><span class="token string">"重庆狼队让二追四跻身春决，妖刀有望创造历史"</span></span><span class="token punctuation">,</span>
              softWrap<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
              overflow<span class="token punctuation">:</span> <span class="token class-name">TextOverflow</span><span class="token punctuation">.</span>ellipsis<span class="token punctuation">,</span>
              style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>textBaseline<span class="token punctuation">:</span> <span class="token class-name">TextBaseline</span><span class="token punctuation">.</span>ideographic<span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            subtitle<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span>
              <span class="token string-literal"><span class="token string">"新京报讯（记者赵雪）5月5日晚，2023KPL（王者荣耀职业联赛）春季赛季后赛继续进行，胜者组决赛的战斗在北京WB和重庆狼队之间打响。期待中的巅峰对决没有上演，狼队在落后两局的情况下连拿四分，率先拿到总决赛门票。"</span></span><span class="token punctuation">,</span>
              softWrap<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
              textAlign<span class="token punctuation">:</span> <span class="token class-name">TextAlign</span><span class="token punctuation">.</span>left<span class="token punctuation">,</span>
              overflow<span class="token punctuation">:</span> <span class="token class-name">TextOverflow</span><span class="token punctuation">.</span>ellipsis<span class="token punctuation">,</span>
              maxLines<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            trailing<span class="token punctuation">:</span> <span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">network</span><span class="token punctuation">(</span>
              <span class="token string-literal"><span class="token string">"https://pics4.baidu.com/feed/a8014c086e061d954c3c74a83f412add63d9ca6d.jpeg@f_auto?token=7acfa4966e5f2a3ddfe120768aebc174"</span></span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token keyword">const</span> <span class="token class-name">Divider</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">network</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"https://www.itying.com/images/flutter/1.png"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token keyword">const</span> <span class="token class-name">SizedBox</span><span class="token punctuation">(</span>
            height<span class="token punctuation">:</span> <span class="token number">44</span><span class="token punctuation">,</span>
            child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span>
              <span class="token string-literal"><span class="token string">"我是一个标题"</span></span><span class="token punctuation">,</span>
              textAlign<span class="token punctuation">:</span> <span class="token class-name">TextAlign</span><span class="token punctuation">.</span>center<span class="token punctuation">,</span>
              style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>fontSize<span class="token punctuation">:</span> <span class="token number">22</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token keyword">const</span> <span class="token class-name">Divider</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="水平列表-可以左右滑动" tabindex="-1"><a class="header-anchor" href="#水平列表-可以左右滑动" aria-hidden="true">#</a> <strong>水平列表 可以左右滑动：</strong></h3>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">class</span> <span class="token class-name">AxisListView</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token class-name">AxisListView</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token class-name">SizedBox</span><span class="token punctuation">(</span>
      height<span class="token punctuation">:</span> <span class="token number">160</span><span class="token punctuation">,</span>
      child<span class="token punctuation">:</span> <span class="token class-name">ListView</span><span class="token punctuation">(</span>
        scrollDirection<span class="token punctuation">:</span> <span class="token class-name">Axis</span><span class="token punctuation">.</span>horizontal<span class="token punctuation">,</span>
        children<span class="token punctuation">:</span> <span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Widget</span><span class="token punctuation">></span></span><span class="token punctuation">[</span>
            <span class="token class-name">Container</span><span class="token punctuation">(</span>
              width<span class="token punctuation">:</span> <span class="token number">180.0</span><span class="token punctuation">,</span>
              color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>white<span class="token punctuation">,</span>
              child<span class="token punctuation">:</span> <span class="token class-name">Column</span><span class="token punctuation">(</span>children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
                <span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">network</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"https://www.itying.com/images/flutter/2.png"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"文字"</span></span><span class="token punctuation">)</span>
              <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token class-name">Container</span><span class="token punctuation">(</span>
              margin<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">fromLTRB</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
              width<span class="token punctuation">:</span> <span class="token number">180.0</span><span class="token punctuation">,</span>
              color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>pink<span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token class-name">Container</span><span class="token punctuation">(</span>
              width<span class="token punctuation">:</span> <span class="token number">180.0</span><span class="token punctuation">,</span>
              color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="listview动态列表组件-以及循环动态数据" tabindex="-1"><a class="header-anchor" href="#listview动态列表组件-以及循环动态数据" aria-hidden="true">#</a> <strong><code v-pre>ListView</code>动态列表组件 以及循环动态数据</strong></h3>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'package:flutter3_andriod/mock/ListMock.dart'</span></span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">MyListView</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token class-name">MyListView</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Widget</span><span class="token punctuation">></span></span> <span class="token function">_initListData</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> tempList <span class="token operator">=</span> listData<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
        leading<span class="token punctuation">:</span> <span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">network</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"${e["</span></span>imageUrl<span class="token string-literal"><span class="token string">"]}"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"${e["</span></span>title<span class="token string-literal"><span class="token string">"]}"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        subtitle<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"${e["</span></span>autho<span class="token string-literal"><span class="token string">r"]}"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> tempList<span class="token punctuation">.</span><span class="token function">toList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token class-name">ListView</span><span class="token punctuation">(</span>children<span class="token punctuation">:</span> <span class="token function">_initListData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="listview-builder-实现动态列表" tabindex="-1"><a class="header-anchor" href="#listview-builder-实现动态列表" aria-hidden="true">#</a> <code v-pre>ListView.builder()</code>实现动态列表</h3>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">class</span> <span class="token class-name">ListViewBuilder</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token class-name">ListViewBuilder</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token class-name">ListView</span><span class="token punctuation">.</span><span class="token function">builder</span><span class="token punctuation">(</span>
      itemCount<span class="token punctuation">:</span> listData<span class="token punctuation">.</span>length<span class="token punctuation">,</span>
      itemBuilder<span class="token punctuation">:</span> <span class="token punctuation">(</span>context<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
          leading<span class="token punctuation">:</span> <span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">network</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"${listData[index]["</span></span>imageUrl<span class="token string-literal"><span class="token string">"]}"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"${listData[index]["</span></span>title<span class="token string-literal"><span class="token string">"]}"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          subtitle<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"${listData[index]["</span></span>autho<span class="token string-literal"><span class="token string">r"]}"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="listview-separated-实现动态列表" tabindex="-1"><a class="header-anchor" href="#listview-separated-实现动态列表" aria-hidden="true">#</a> <code v-pre>ListView.separated()</code>实现动态列表</h3>
<p>列表子项之间需要分割线</p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">class</span> <span class="token class-name">ListViewSeparated</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token class-name">ListViewSeparated</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token class-name">ListView</span><span class="token punctuation">.</span><span class="token function">separated</span><span class="token punctuation">(</span>
      physics<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">AlwaysScrollableScrollPhysics</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      itemCount<span class="token punctuation">:</span> listData<span class="token punctuation">.</span>length<span class="token punctuation">,</span>
      itemBuilder<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token class-name">BuildContext</span> ctxt<span class="token punctuation">,</span> int index<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
          leading<span class="token punctuation">:</span> <span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">network</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"${listData[index]["</span></span>imageUrl<span class="token string-literal"><span class="token string">"]}"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"${listData[index]["</span></span>title<span class="token string-literal"><span class="token string">"]}"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          subtitle<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"${listData[index]["</span></span>autho<span class="token string-literal"><span class="token string">r"]}"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token comment">// 设置分割线</span>
      separatorBuilder<span class="token punctuation">:</span> <span class="token punctuation">(</span>context<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">const</span> <span class="token class-name">Divider</span><span class="token punctuation">(</span>
          height<span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span>
          color<span class="token punctuation">:</span> <span class="token class-name">Color</span><span class="token punctuation">(</span><span class="token number">0xFF968493</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="gridview网格布局组件" tabindex="-1"><a class="header-anchor" href="#gridview网格布局组件" aria-hidden="true">#</a> <code v-pre>GridView</code>网格布局组件</h2>
<p><code v-pre>GridView</code>网格布局在实际项目中用的也是非常多的，当我们想让可以滚动的元素使用矩阵方式排列的时
候。此时我们可以用网格列表组件<code v-pre>GridView</code>实现布局。</p>
<p><strong><code v-pre>GridView</code>创建网格列表主要有下面三种方式</strong></p>
<ol>
<li>可以通过<code v-pre>GridView.count </code>实现网格布局</li>
<li>可以通过<code v-pre>GridView.extent</code> 实现网格布局</li>
<li>通过<code v-pre>GridView.builder</code>实现动态网格布局</li>
</ol>
<h3 id="常用属性" tabindex="-1"><a class="header-anchor" href="#常用属性" aria-hidden="true">#</a> 常用属性：</h3>
<table>
<thead>
<tr>
<th>名称</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code v-pre>scrollDirection</code></td>
<td><code v-pre>Axis</code></td>
<td>滚动方法</td>
</tr>
<tr>
<td><code v-pre>padding</code></td>
<td><code v-pre>EdgeInsetsGeometry</code></td>
<td>内边距</td>
</tr>
<tr>
<td><code v-pre>resolve</code></td>
<td><code v-pre>bool</code></td>
<td>组件反向排序</td>
</tr>
<tr>
<td><code v-pre>crossAxisSpacing</code></td>
<td><code v-pre>double</code></td>
<td>水平子<code v-pre>Widget</code>之间间距</td>
</tr>
<tr>
<td><code v-pre>mainAxisSpacing</code></td>
<td><code v-pre>double</code></td>
<td>垂直子<code v-pre>Widget</code>之间间距</td>
</tr>
<tr>
<td><code v-pre>crossAxisCount</code></td>
<td><code v-pre>int </code>用在<code v-pre>GridView.count</code></td>
<td>一行的<code v-pre>Widget</code>数量</td>
</tr>
<tr>
<td><code v-pre>maxCrossAxisExtent</code></td>
<td><code v-pre>double </code>用在<code v-pre>GridView.extent</code></td>
<td>横轴子元素的最大长度</td>
</tr>
<tr>
<td><code v-pre>childAspectRatio</code></td>
<td><code v-pre>double</code></td>
<td>子<code v-pre>Widget</code>宽高比例</td>
</tr>
<tr>
<td>children</td>
<td></td>
<td>[ ]</td>
</tr>
<tr>
<td><code v-pre>gridDelegate</code></td>
<td><code v-pre>SliverGridDelegateWithFixedCrossAxisCount</code><br/><code v-pre>SliverGridDelegateWithMaxCrossAxisExtent</code></td>
<td>控制布局主要用在<code v-pre>GridView.builder</code>里</td>
</tr>
<tr>
<td>面</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h3 id="gridview-count-实现网格布局" tabindex="-1"><a class="header-anchor" href="#gridview-count-实现网格布局" aria-hidden="true">#</a> <code v-pre>GridView.count</code> 实现网格布局</h3>
<p><code v-pre>GridView.count</code>构造函数内部使用了<code v-pre>SliverGridDelegateWithFixedCrossAxisCount</code>，我们通过它可以
快速的创建横轴固定数量子元素的<code v-pre>GridView</code></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'package:flutter/material.dart'</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'package:flutter3_andriod/mock/ListMock.dart'</span></span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">GridViewCount</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token class-name">GridViewCount</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Widget</span><span class="token punctuation">></span></span> <span class="token function">_initGridData</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> tempList <span class="token operator">=</span> listData<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
        decoration<span class="token punctuation">:</span>
            <span class="token class-name">BoxDecoration</span><span class="token punctuation">(</span>border<span class="token punctuation">:</span> <span class="token class-name">Border</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>black<span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        child<span class="token punctuation">:</span> <span class="token class-name">Column</span><span class="token punctuation">(</span>children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
          <span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">network</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"</span><span class="token interpolation"><span class="token punctuation">${</span><span class="token expression">e<span class="token punctuation">[</span><span class="token string-literal"><span class="token string">'imageUrl'</span></span><span class="token punctuation">]</span></span><span class="token punctuation">}</span></span><span class="token string">"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token keyword">const</span> <span class="token class-name">SizedBox</span><span class="token punctuation">(</span>height<span class="token punctuation">:</span> <span class="token number">15</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"</span><span class="token interpolation"><span class="token punctuation">${</span><span class="token expression">e<span class="token punctuation">[</span><span class="token string-literal"><span class="token string">'title'</span></span><span class="token punctuation">]</span></span><span class="token punctuation">}</span></span><span class="token string">"</span></span><span class="token punctuation">)</span>
        <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> tempList<span class="token punctuation">.</span><span class="token function">toList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token class-name">GridView</span><span class="token punctuation">.</span><span class="token function">count</span><span class="token punctuation">(</span>
        scrollDirection<span class="token punctuation">:</span> <span class="token class-name">Axis</span><span class="token punctuation">.</span>vertical<span class="token punctuation">,</span> <span class="token comment">// 滚动方法</span>
        padding<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        crossAxisCount<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token comment">// 一行的Widget数量</span>
        crossAxisSpacing<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token comment">// 水平子Widget之间间距</span>
        mainAxisSpacing<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token comment">// 垂直子Widget之间间距</span>
        childAspectRatio<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// 子Widget宽高比例</span>
        children<span class="token punctuation">:</span> <span class="token function">_initGridData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="gridview-extent实现网格布局" tabindex="-1"><a class="header-anchor" href="#gridview-extent实现网格布局" aria-hidden="true">#</a> <code v-pre>GridView.extent</code>实现网格布局</h3>
<p><code v-pre>GridView.extent</code>构造函数内部使用了<code v-pre>SliverGridDelegateWithMaxCrossAxisExtent</code>，我们通过它可以
快速的创建横轴子元素为固定最大长度的的<code v-pre>GridView</code></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'package:flutter/material.dart'</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'package:flutter3_andriod/mock/ListMock.dart'</span></span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">GridViewExtent</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token class-name">GridViewExtent</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Widget</span><span class="token punctuation">></span></span> <span class="token function">_initGridData</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Widget</span><span class="token punctuation">></span></span> list <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">15</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      list<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token class-name">Container</span><span class="token punctuation">(</span>
          alignment<span class="token punctuation">:</span> <span class="token class-name">Alignment</span><span class="token punctuation">.</span>center<span class="token punctuation">,</span>
          decoration<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">BoxDecoration</span><span class="token punctuation">(</span>
            color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>amberAccent<span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span>
            <span class="token string-literal"><span class="token string">"第</span><span class="token interpolation"><span class="token punctuation">${</span><span class="token expression">i <span class="token operator">+</span> <span class="token number">1</span></span><span class="token punctuation">}</span></span><span class="token string">个元素"</span></span><span class="token punctuation">,</span>
            style<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>white<span class="token punctuation">,</span> fontSize<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> list<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token class-name">GridView</span><span class="token punctuation">.</span><span class="token function">extent</span><span class="token punctuation">(</span>
      maxCrossAxisExtent<span class="token punctuation">:</span> <span class="token number">240</span><span class="token punctuation">,</span> <span class="token comment">// 横轴子元素的最大长度</span>
      padding<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      crossAxisSpacing<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token comment">// 水平子Widget之间间距</span>
      mainAxisSpacing<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token comment">// 垂直子Widget之间间距</span>
      childAspectRatio<span class="token punctuation">:</span> <span class="token number">1.5</span><span class="token punctuation">,</span> <span class="token comment">// 子Widget宽高比例</span>
      children<span class="token punctuation">:</span> <span class="token function">_initGridData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="gridview-builder实现动态列表" tabindex="-1"><a class="header-anchor" href="#gridview-builder实现动态列表" aria-hidden="true">#</a> <code v-pre>GridView.builder</code>实现动态列表</h3>
<h4 id="_1-slivergriddelegatewithfixedcrossaxiscount" tabindex="-1"><a class="header-anchor" href="#_1-slivergriddelegatewithfixedcrossaxiscount" aria-hidden="true">#</a> 1. <code v-pre>SliverGridDelegateWithFixedCrossAxisCount</code></h4>
<p>用于固定列数场景，类似 <code v-pre>GridView.count</code></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'package:flutter/material.dart'</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'package:flutter3_andriod/mock/ListMock.dart'</span></span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">GridViewBuilderCount</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token class-name">GridViewBuilderCount</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token class-name">Widget</span> <span class="token function">_initGridData</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
        decoration<span class="token punctuation">:</span>
            <span class="token class-name">BoxDecoration</span><span class="token punctuation">(</span>border<span class="token punctuation">:</span> <span class="token class-name">Border</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>black<span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        child<span class="token punctuation">:</span> <span class="token class-name">Column</span><span class="token punctuation">(</span>children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
          <span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">network</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"</span><span class="token interpolation"><span class="token punctuation">${</span><span class="token expression">listData<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token string-literal"><span class="token string">'imageUrl'</span></span><span class="token punctuation">]</span></span><span class="token punctuation">}</span></span><span class="token string">"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token keyword">const</span> <span class="token class-name">SizedBox</span><span class="token punctuation">(</span>height<span class="token punctuation">:</span> <span class="token number">15</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"</span><span class="token interpolation"><span class="token punctuation">${</span><span class="token expression">listData<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token string-literal"><span class="token string">'title'</span></span><span class="token punctuation">]</span></span><span class="token punctuation">}</span></span><span class="token string">"</span></span><span class="token punctuation">)</span>
        <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token class-name">GridView</span><span class="token punctuation">.</span><span class="token function">builder</span><span class="token punctuation">(</span>
      padding<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      itemCount<span class="token punctuation">:</span> listData<span class="token punctuation">.</span>length<span class="token punctuation">,</span>
      gridDelegate<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">SliverGridDelegateWithFixedCrossAxisCount</span><span class="token punctuation">(</span>
        crossAxisCount<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token comment">// 一行的Widget数量</span>
        crossAxisSpacing<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token comment">// 水平子Widget之间间距</span>
        mainAxisSpacing<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token comment">// 垂直子Widget之间间距</span>
        childAspectRatio<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// 子Widget宽高比例</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
      itemBuilder<span class="token punctuation">:</span> _initGridData<span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="_2-slivergriddelegatewithmaxcrossaxisextent" tabindex="-1"><a class="header-anchor" href="#_2-slivergriddelegatewithmaxcrossaxisextent" aria-hidden="true">#</a> 2. <code v-pre>SliverGridDelegateWithMaxCrossAxisExtent </code></h4>
<p>用于子元素有最大宽度限制场景，类似<code v-pre>GridView.extent</code></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'package:flutter/material.dart'</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'package:flutter3_andriod/mock/ListMock.dart'</span></span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">GridViewBuilderExtent</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token class-name">GridViewBuilderExtent</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token class-name">Widget</span> <span class="token function">_initGridData</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
      decoration<span class="token punctuation">:</span>
          <span class="token class-name">BoxDecoration</span><span class="token punctuation">(</span>border<span class="token punctuation">:</span> <span class="token class-name">Border</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>black<span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      child<span class="token punctuation">:</span> <span class="token class-name">Column</span><span class="token punctuation">(</span>children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">network</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"</span><span class="token interpolation"><span class="token punctuation">${</span><span class="token expression">listData<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token string-literal"><span class="token string">'imageUrl'</span></span><span class="token punctuation">]</span></span><span class="token punctuation">}</span></span><span class="token string">"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token keyword">const</span> <span class="token class-name">SizedBox</span><span class="token punctuation">(</span>height<span class="token punctuation">:</span> <span class="token number">15</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"</span><span class="token interpolation"><span class="token punctuation">${</span><span class="token expression">listData<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token string-literal"><span class="token string">'title'</span></span><span class="token punctuation">]</span></span><span class="token punctuation">}</span></span><span class="token string">"</span></span><span class="token punctuation">)</span>
      <span class="token punctuation">]</span><span class="token punctuation">)</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token class-name">GridView</span><span class="token punctuation">.</span><span class="token function">builder</span><span class="token punctuation">(</span>
        padding<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        itemCount<span class="token punctuation">:</span> listData<span class="token punctuation">.</span>length<span class="token punctuation">,</span>
        gridDelegate<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">SliverGridDelegateWithMaxCrossAxisExtent</span><span class="token punctuation">(</span>
          maxCrossAxisExtent<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
          crossAxisSpacing<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token comment">// 水平子Widget之间间距</span>
          mainAxisSpacing<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token comment">// 垂直子Widget之间间距</span>
          childAspectRatio<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// 子Widget宽高比例</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
        itemBuilder<span class="token punctuation">:</span> _initGridData<span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="paddiing组件" tabindex="-1"><a class="header-anchor" href="#paddiing组件" aria-hidden="true">#</a> <code v-pre>Paddiing</code>组件</h2>
<p>在<code v-pre>html</code>中常见的布局标签都有padding属性，但是<code v-pre>Flutter</code>中很多<code v-pre>Widget</code>是没有<code v-pre>padding</code>属性。这个时候 我们可以用<code v-pre>Padding</code>组件处理容器与子元素之间的间距。在<code v-pre>html</code>中常见的布局标签都有<code v-pre>padding</code>属性，但是<code v-pre>Flutter</code>中很多<code v-pre>Widget</code>是没有<code v-pre>padding</code>属性。这个时候 我们可以用<code v-pre>Padding</code>组件处理容器与子元素之间的间距。</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code v-pre>padding</code></td>
<td><code v-pre>padding</code>值, <code v-pre>EdgeInsetss</code>设置填充的值</td>
</tr>
<tr>
<td><code v-pre>child</code></td>
<td>子组件</td>
</tr>
</tbody>
</table>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">class</span> <span class="token class-name">MyPadding</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token class-name">MyPadding</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">const</span> <span class="token class-name">Padding</span><span class="token punctuation">(</span>
      padding<span class="token punctuation">:</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是Padding组件"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="线性布局-row和column" tabindex="-1"><a class="header-anchor" href="#线性布局-row和column" aria-hidden="true">#</a> 线性布局（<code v-pre>Row</code>和<code v-pre>Column</code>）</h2>
<h3 id="_1-row-水平布局组件" tabindex="-1"><a class="header-anchor" href="#_1-row-水平布局组件" aria-hidden="true">#</a> 1. <code v-pre>Row</code> 水平布局组件</h3>
<p>水平展示多个子控件的控件，即将一系列控件排成一行显示</p>
<p><strong>对于线性布局：</strong></p>
<ul>
<li>若布局沿水平方向（如<code v-pre>Row</code>），那么主轴 = 水平方向、纵轴 = 垂直方向</li>
<li>若布局沿垂直方向（如<code v-pre>Colum</code>），那么主轴 = 垂直方向、纵轴 = 水平方向</li>
</ul>
<p><strong>属性说明</strong></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code> <span class="token comment">// 属性说明</span>
 <span class="token class-name">Row</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token class-name">Key</span> key<span class="token punctuation">,</span>  <span class="token comment">// 全局key来唯一标识子widget</span>
    <span class="token class-name">MainAxisAlignment</span> mainAxisAlignment <span class="token operator">=</span> <span class="token class-name">MainAxisAlignment</span><span class="token punctuation">.</span>start<span class="token punctuation">,</span>  <span class="token comment">// 子控件放置方式</span>
    <span class="token class-name">MainAxisSize</span> mainAxisSize <span class="token operator">=</span> <span class="token class-name">MainAxisSize</span><span class="token punctuation">.</span>max<span class="token punctuation">,</span>  <span class="token comment">// 子控件应该如何沿着主轴放置</span>
    <span class="token class-name">CrossAxisAlignment</span> crossAxisAlignment <span class="token operator">=</span> <span class="token class-name">CrossAxisAlignment</span><span class="token punctuation">.</span>center<span class="token punctuation">,</span> <span class="token comment">// 子控件对齐方式</span>
    <span class="token class-name">TextDirection</span> textDirection<span class="token punctuation">,</span> <span class="token comment">// 排列方式：从左到右，还是从右到左排序</span>
    <span class="token class-name">VerticalDirection</span> verticalDirection <span class="token operator">=</span> <span class="token class-name">VerticalDirection</span><span class="token punctuation">.</span>down<span class="token punctuation">,</span>  <span class="token comment">// 垂直排序</span>
    <span class="token class-name">TextBaseline</span> textBaseline<span class="token punctuation">,</span> <span class="token comment">// 对齐文本的水平线</span>
    <span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Widget</span><span class="token punctuation">></span></span> children <span class="token operator">=</span> <span class="token keyword">const</span> <span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Widget</span><span class="token punctuation">></span></span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 子控件</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>属性详解</strong></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code> <span class="token comment">// 属性详解</span>
 <span class="token comment">// 1. mainAxisAlignment</span>
 <span class="token comment">// 说明：子控件根据主轴的对齐方式，枚举对象（默认值为start）</span>
 <span class="token keyword">enum</span> <span class="token class-name">MainAxisAlignment</span> <span class="token punctuation">{</span>
  start<span class="token punctuation">,</span>  <span class="token comment">// 内部的子组件将从主轴起始位置开始排列（正向排列）</span>
   end<span class="token punctuation">,</span> <span class="token comment">// 内部的子组件将从主轴末尾位置开始排列（反向排列）</span>
  center<span class="token punctuation">,</span> <span class="token comment">// 内部的子组件将从主轴中间位置开始排列（居中）</span>
  spaceBetween<span class="token punctuation">,</span> <span class="token comment">// 内部的首尾子组件靠近首尾两端，其余子组件居中排列且组件间的间距一样</span>
  spaceAround<span class="token punctuation">,</span>  <span class="token comment">// 内部的子组件居中排列，且每个子组件的左右边距一样大</span>
  spaceEvenly<span class="token punctuation">,</span>  <span class="token comment">// 内部的子组件居中显示，每个空间的左边和右边都有相同的间距</span>
<span class="token punctuation">}</span>

<span class="token comment">// 2. mainAxisSize</span>
<span class="token comment">// 说明：子控件如何放置，枚举对象（默认值为max）</span>
<span class="token keyword">enum</span> <span class="token class-name">MainAxisSize</span> <span class="token punctuation">{</span>
  min<span class="token punctuation">,</span> <span class="token comment">// 控件尽可能小，相当于wrap_content（取此值时，上面的MainAxisAlignment 无效），</span>
  max<span class="token punctuation">,</span> <span class="token comment">//  控件尽可能大，相当于match_parent</span>
<span class="token punctuation">}</span>

<span class="token comment">// 3. crossAxisAlignment</span>
<span class="token comment">// 说明：子控件对于纵轴的对齐方式，当子控件高度不一样时，如何被放置在主轴（中心轴），而MainAxisAlignment 决定了子控件间的间隔</span>
<span class="token keyword">enum</span> <span class="token class-name">CrossAxisAlignment</span> <span class="token punctuation">{</span>
  start<span class="token punctuation">,</span>  <span class="token comment">// 内部的子组件将从非主轴起始位置开始排列（正向排列）</span>
  end<span class="token punctuation">,</span> <span class="token comment">// 内部的子组件将从非主轴末尾位置开始排列（反向排列）</span>
  center<span class="token punctuation">,</span> <span class="token comment">// 内部的子组件将从非主轴中间位置开始排列（居中）</span>
  stretch<span class="token punctuation">,</span> <span class="token comment">// 内部的子组件将从非主轴中间位置开始排列，并且完全填充非主轴方向</span>
  baseline<span class="token punctuation">,</span> <span class="token comment">// 内部的子组件将从baseline的方向对齐，这个需要设置textBaseline属性，不然的话会报错</span>
<span class="token punctuation">}</span>

<span class="token comment">// 4. textBaseline</span>
<span class="token comment">// 说明：对齐文本的水平线</span>
<span class="token keyword">enum</span> <span class="token class-name">TextBaseline</span> <span class="token punctuation">{</span>
  alphabetic<span class="token punctuation">,</span> <span class="token comment">// 用于对齐字母字符的字形底部的水平线</span>
  ideographic<span class="token punctuation">,</span>  <span class="token comment">// 用于对齐表意文字的水平线</span>
<span class="token punctuation">}</span>

<span class="token comment">// 5. textDirection</span>
<span class="token comment">// 说明：子控件排序方向 （一般不用设置，除非想反转子控件排序）</span>
<span class="token comment">// Row 使用 TextDirection</span>
<span class="token comment">// Column 使用 VerticalDirection</span>
<span class="token keyword">enum</span> <span class="token class-name">VerticalDirection</span> <span class="token punctuation">{</span>
  up<span class="token punctuation">,</span>  <span class="token comment">//  子控件从下到上排序</span>
  down<span class="token punctuation">,</span> <span class="token comment">//  子控件从上到下排序</span>
<span class="token punctuation">}</span>
<span class="token keyword">enum</span> <span class="token class-name">TextDirection</span> <span class="token punctuation">{</span>
  rtl<span class="token punctuation">,</span> <span class="token comment">// 子控件从右到左排序</span>
  ltr<span class="token punctuation">,</span> <span class="token comment">// 子控件从左到右排序</span>
<span class="token punctuation">}</span>

<span class="token comment">// 6. children</span>
<span class="token comment">// 设置子控件</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_2-column垂直布局组件" tabindex="-1"><a class="header-anchor" href="#_2-column垂直布局组件" aria-hidden="true">#</a> 2. <code v-pre>Column</code>垂直布局组件</h3>
<p>垂直方向展示多个子控件的控件，即将一系列控件排成一列显示</p>
<p><strong>属性说明</strong></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token comment">// 属性说明</span>
 <span class="token class-name">Column</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token class-name">Key</span> key<span class="token punctuation">,</span>  <span class="token comment">// 全局key来唯一标识子widget</span>
    <span class="token class-name">MainAxisAlignment</span> mainAxisAlignment <span class="token operator">=</span> <span class="token class-name">MainAxisAlignment</span><span class="token punctuation">.</span>start<span class="token punctuation">,</span>  <span class="token comment">// 子控件放置方式</span>
    <span class="token class-name">MainAxisSize</span> mainAxisSize <span class="token operator">=</span> <span class="token class-name">MainAxisSize</span><span class="token punctuation">.</span>max<span class="token punctuation">,</span>  <span class="token comment">// 子控件应该如何沿着主轴放置</span>
    <span class="token class-name">CrossAxisAlignment</span> crossAxisAlignment <span class="token operator">=</span> <span class="token class-name">CrossAxisAlignment</span><span class="token punctuation">.</span>center<span class="token punctuation">,</span> <span class="token comment">// 子控件对齐方式</span>
    <span class="token class-name">TextDirection</span> textDirection<span class="token punctuation">,</span> <span class="token comment">// 排列方式：从左到右，还是从右到左排序</span>
    <span class="token class-name">VerticalDirection</span> verticalDirection <span class="token operator">=</span> <span class="token class-name">VerticalDirection</span><span class="token punctuation">.</span>down<span class="token punctuation">,</span>  <span class="token comment">// 垂直排序</span>
    <span class="token class-name">TextBaseline</span> textBaseline<span class="token punctuation">,</span> <span class="token comment">// 对齐文本的水平线</span>
    <span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Widget</span><span class="token punctuation">></span></span> children <span class="token operator">=</span> <span class="token keyword">const</span> <span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Widget</span><span class="token punctuation">></span></span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 子控件</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>属性详解</strong></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code> <span class="token comment">// 属性详解</span>
 <span class="token comment">// 1. mainAxisAlignment</span>
 <span class="token comment">// 说明：子控件根据主轴的对齐方式，枚举对象（默认值为start）</span>
 <span class="token keyword">enum</span> <span class="token class-name">MainAxisAlignment</span> <span class="token punctuation">{</span>
  start<span class="token punctuation">,</span>  <span class="token comment">// 内部的子组件将从主轴起始位置开始排列（正向排列）</span>
   end<span class="token punctuation">,</span> <span class="token comment">// 内部的子组件将从主轴末尾位置开始排列（反向排列）</span>
  center<span class="token punctuation">,</span> <span class="token comment">// 内部的子组件将从主轴中间位置开始排列（居中）</span>
  spaceBetween<span class="token punctuation">,</span> <span class="token comment">// 内部的首尾子组件靠近首尾两端，其余子组件居中排列且组件间的间距一样</span>
  spaceAround<span class="token punctuation">,</span>  <span class="token comment">// 内部的子组件居中排列，且每个子组件的左右边距一样大</span>
  spaceEvenly<span class="token punctuation">,</span>  <span class="token comment">// 内部的子组件居中显示，每个空间的左边和右边都有相同的间距</span>
<span class="token punctuation">}</span>

<span class="token comment">// 2. mainAxisSize</span>
<span class="token comment">// 说明：子控件如何放置，枚举对象（默认值为max）</span>
<span class="token keyword">enum</span> <span class="token class-name">MainAxisSize</span> <span class="token punctuation">{</span>
  min<span class="token punctuation">,</span> <span class="token comment">// 控件尽可能小，相当于wrap_content（取此值时，上面的MainAxisAlignment 无效），</span>
  max<span class="token punctuation">,</span> <span class="token comment">//  控件尽可能大，相当于match_parent</span>
<span class="token punctuation">}</span>

<span class="token comment">// 3. crossAxisAlignment</span>
<span class="token comment">// 说明：子控件对于纵轴的对齐方式，当子控件高度不一样时，如何被放置在主轴（中心轴），而MainAxisAlignment 决定了子控件间的间隔</span>
<span class="token keyword">enum</span> <span class="token class-name">CrossAxisAlignment</span> <span class="token punctuation">{</span>
  start<span class="token punctuation">,</span>  <span class="token comment">// 内部的子组件将从非主轴起始位置开始排列（正向排列）</span>
  end<span class="token punctuation">,</span> <span class="token comment">// 内部的子组件将从非主轴末尾位置开始排列（反向排列）</span>
  center<span class="token punctuation">,</span> <span class="token comment">// 内部的子组件将从非主轴中间位置开始排列（居中）</span>
  stretch<span class="token punctuation">,</span> <span class="token comment">// 内部的子组件将从非主轴中间位置开始排列，并且完全填充非主轴方向</span>
  baseline<span class="token punctuation">,</span> <span class="token comment">// 内部的子组件将从baseline的方向对齐，这个需要设置textBaseline属性，不然的话会报错</span>
<span class="token punctuation">}</span>

<span class="token comment">// 4. textBaseline</span>
<span class="token comment">// 说明：对齐文本的水平线</span>
<span class="token keyword">enum</span> <span class="token class-name">TextBaseline</span> <span class="token punctuation">{</span>
  alphabetic<span class="token punctuation">,</span> <span class="token comment">// 用于对齐字母字符的字形底部的水平线</span>
  ideographic<span class="token punctuation">,</span>  <span class="token comment">// 用于对齐表意文字的水平线</span>
<span class="token punctuation">}</span>

<span class="token comment">// 5. textDirection</span>
<span class="token comment">// 说明：子控件排序方向 （一般不用设置，除非想反转子控件排序）</span>
<span class="token comment">// Row 使用 TextDirection</span>
<span class="token comment">// Column 使用 VerticalDirection</span>
<span class="token keyword">enum</span> <span class="token class-name">VerticalDirection</span> <span class="token punctuation">{</span>
  up<span class="token punctuation">,</span>  <span class="token comment">//  子控件从下到上排序</span>
  down<span class="token punctuation">,</span> <span class="token comment">//  子控件从上到下排序</span>
<span class="token punctuation">}</span>
<span class="token keyword">enum</span> <span class="token class-name">TextDirection</span> <span class="token punctuation">{</span>
  rtl<span class="token punctuation">,</span> <span class="token comment">// 子控件从右到左排序</span>
  ltr<span class="token punctuation">,</span> <span class="token comment">// 子控件从左到右排序</span>
<span class="token punctuation">}</span>

<span class="token comment">// 6. children</span>
<span class="token comment">// 设置子控件</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="double-infinity-和double-maxfinite" tabindex="-1"><a class="header-anchor" href="#double-infinity-和double-maxfinite" aria-hidden="true">#</a> <code v-pre>double.infinity</code> 和<code v-pre>double.maxFinite</code></h3>
<p><code v-pre>double.infinity</code> 和<code v-pre>double.maxFinite</code>可以让当前元素的<code v-pre>width</code>或者<code v-pre>height</code>达到父元素的尺寸</p>
<p><strong>底层代码</strong></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">static</span> <span class="token keyword">const</span> double nan <span class="token operator">=</span> <span class="token number">0.0</span> <span class="token operator">/</span> <span class="token number">0.0</span><span class="token punctuation">;</span>
<span class="token keyword">static</span> <span class="token keyword">const</span> double infinity <span class="token operator">=</span> <span class="token number">1.0</span> <span class="token operator">/</span> <span class="token number">0.0</span><span class="token punctuation">;</span>
<span class="token keyword">static</span> <span class="token keyword">const</span> double negativeInfinity <span class="token operator">=</span> <span class="token operator">-</span>infinity<span class="token punctuation">;</span>
<span class="token keyword">static</span> <span class="token keyword">const</span> double minPositive <span class="token operator">=</span> <span class="token number">5e-324</span><span class="token punctuation">;</span>
<span class="token keyword">static</span> <span class="token keyword">const</span> double maxFinite <span class="token operator">=</span> <span class="token number">1.7976931348623157e+308</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="弹性布局-flex-expanded-flexible" tabindex="-1"><a class="header-anchor" href="#弹性布局-flex-expanded-flexible" aria-hidden="true">#</a> 弹性布局（<code v-pre>Flex</code>  <code v-pre>Expanded </code>  <code v-pre>Flexible</code>）</h2>
<p><code v-pre>Flex</code> 组件可以沿着水平或垂直方向排列子组件，如果你知道主轴方向，使用 <code v-pre>Row</code> 或 <code v-pre>Column</code> 会方便一 些，因为 <code v-pre>Row</code> 和 <code v-pre>Column</code> 都继承自<code v-pre> Flex</code> ，参数基本相同，所以能使用<code v-pre>Flex</code>的地方基本上都可以使用<code v-pre> Row</code> 或 <code v-pre>Column </code>。 <code v-pre>Flex</code> 本身功能是很强大的，它也可以和 <code v-pre>Expanded</code> 组件配合实现弹性布局 。</p>
<h3 id="_1-flex组件" tabindex="-1"><a class="header-anchor" href="#_1-flex组件" aria-hidden="true">#</a> 1. <code v-pre>Flex</code>组件</h3>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code v-pre>direction</code></td>
<td>设置主轴方向</td>
</tr>
<tr>
<td><code v-pre>mainAxisAlignment</code></td>
<td>设置子 <code v-pre>Widget</code> 沿着主轴方向的排列方式</td>
</tr>
<tr>
<td><code v-pre>mainAxisSize</code></td>
<td>设置主轴的大小</td>
</tr>
<tr>
<td><code v-pre>crossAxisAlignment</code></td>
<td>设置子 <code v-pre>Widget</code>沿着交叉轴方向的排列方式</td>
</tr>
<tr>
<td><code v-pre>verticalDirection</code></td>
<td>设置垂直方向上的子<code v-pre> Widget</code> 的排列顺序</td>
</tr>
<tr>
<td><code v-pre>textBaseline</code></td>
<td>设置文字对齐的基线类型</td>
</tr>
</tbody>
</table>
<h3 id="_2-expanded组件" tabindex="-1"><a class="header-anchor" href="#_2-expanded组件" aria-hidden="true">#</a> 2. <code v-pre>Expanded</code>组件</h3>
<p>按比例伸缩 / 扩展 <code v-pre>Row</code>、<code v-pre>Column</code>和<code v-pre>Flex</code>子组件所占用的空间大小</p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">const</span> <span class="token class-name">Expanded</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token class-name">Key</span> key<span class="token punctuation">,</span> <span class="token comment">// 唯一标识符</span>
    int flex <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// 弹性系数，默认值 = 1</span>
                 <span class="token comment">// 若为 0 或 null，则 child 是没有弹性的，即不会被扩伸占用的空间。</span>
                 <span class="token comment">// 若大于 0，所有的Expanded按照其flex的比例来分割主轴的全部空闲空间。</span>
    <span class="token metadata function">@required</span> <span class="token class-name">Widget</span> child<span class="token punctuation">,</span> <span class="token comment">// 子控件</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> 
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_3-flexible组件" tabindex="-1"><a class="header-anchor" href="#_3-flexible组件" aria-hidden="true">#</a> 3. <code v-pre>Flexible</code>组件</h3>
<p><code v-pre>Flexible</code> 的<code v-pre> fix</code> 属性默认为<code v-pre> FlexFit.loose</code>，而<code v-pre> Expanded</code> 继承<code v-pre> Flexible</code>，其 <code v-pre>fix</code> 属性指定为 <code v-pre>FlexFit.tight</code>，两者因为其 <code v-pre>fix</code> 属性不用而不同，若将 <code v-pre>Flexible</code> 的 <code v-pre>fit</code> 属性设置为 <code v-pre>FlexFit.tight</code>，则 <code v-pre>Flexible</code> 与 <code v-pre>Expanded</code> 等效，可设置的<code v-pre>fit</code> 属性如下：</p>
<ul>
<li>**<code v-pre>tight</code>：**强制填充可利用的空间；</li>
<li>**<code v-pre>loose</code>：**不强制填充可利用空间，Widget自身大小。</li>
</ul>
<h2 id="层叠布局-stack、align、-positioned" tabindex="-1"><a class="header-anchor" href="#层叠布局-stack、align、-positioned" aria-hidden="true">#</a> 层叠布局（<code v-pre>Stack</code>、<code v-pre>Align</code>、 <code v-pre>Positioned</code>）</h2>
<h3 id="_1-stack组件" tabindex="-1"><a class="header-anchor" href="#_1-stack组件" aria-hidden="true">#</a> 1. <code v-pre>Stack</code>组件</h3>
<p><code v-pre>Stack</code>表示堆的意思，我们可以用<code v-pre>Stack</code>或者<code v-pre>Stack</code>结合<code v-pre>Align</code>或者<code v-pre>Stack</code>结合 <code v-pre>Positiond</code>来实现页面的定位布局</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code v-pre>alignment</code></td>
<td>配置所有子元素的显示位置</td>
</tr>
<tr>
<td><code v-pre>children</code></td>
<td>子组件</td>
</tr>
</tbody>
</table>
<h3 id="_2-align组件" tabindex="-1"><a class="header-anchor" href="#_2-align组件" aria-hidden="true">#</a> 2. <code v-pre>Align</code>组件</h3>
<p><code v-pre>Align</code> 组件可以调整子组件的位置 , <code v-pre>Stack</code>组件中结合<code v-pre>Align</code>组件也可以控制每个子元素的显示位置</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code v-pre>alignment</code></td>
<td>配置所有子元素的显示位置</td>
</tr>
<tr>
<td><code v-pre>children</code></td>
<td>子组件</td>
</tr>
</tbody>
</table>
<p><strong><code v-pre>Align</code>结合<code v-pre>Alignment</code> 参数</strong></p>
<p><code v-pre>Alignment Widget</code>会以矩形的中心点作为坐标原点，即 <code v-pre>Alignment(0.0, 0.0)</code> 。<code v-pre>x</code>、<code v-pre>y </code>的值从-1到 1分别代表矩形左边到右边的距离和顶部到底边的距离，因此2个水平（或垂直）单位则等于矩形的宽 （或高），如 <code v-pre>Alignment(-1.0, -1.0)</code> 代表矩形的左侧顶点，而 <code v-pre>Alignment(1.0, 1.0)</code> 代表右侧底 部终点，而 <code v-pre>Alignment(1.0, -1.0)</code> 则正是右侧顶点，即 <code v-pre>Alignment.topRight</code> 。为了使用方便，矩 形的原点、四个顶点，以及四条边的终点在<code v-pre> Alignment</code> 类中都已经定义为了静态常量。 <code v-pre>Alignment</code> 可以通过其坐标转换公式将其坐标转为子元素的具体偏移坐标：</p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token punctuation">(</span><span class="token class-name">Alignment</span><span class="token punctuation">.</span>x<span class="token operator">*</span>childWidth<span class="token operator">/</span><span class="token number">2</span><span class="token operator">+</span>childWidth<span class="token operator">/</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token class-name">Alignment</span><span class="token punctuation">.</span>y<span class="token operator">*</span>childHeight<span class="token operator">/</span><span class="token number">2</span><span class="token operator">+</span>childHeight<span class="token operator">/</span><span class="token number">2</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>其中 <code v-pre>childWidth </code>为子元素的宽度， <code v-pre>childHeight </code>为子元素高度。</p>
<p>现在我们再看看上面的示例，我们将 <code v-pre>Alignment(2, 0.0) </code>带入上面公式， <code v-pre>(2*120/2+120/2, 0*120/2+120/2)</code> ，可得 <code v-pre>FlutterLogo</code> 的实际偏移坐标正是<code v-pre>（180,60）</code>。</p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">class</span> <span class="token class-name">HomePage</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token class-name">HomePage</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token class-name">Key</span><span class="token operator">?</span> key<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword">super</span><span class="token punctuation">(</span>key<span class="token punctuation">:</span> key<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token metadata function">@override</span>
    <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
            height<span class="token punctuation">:</span> <span class="token number">120.0</span><span class="token punctuation">,</span>
            width<span class="token punctuation">:</span> <span class="token number">120.0</span><span class="token punctuation">,</span>
            color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">.</span>shade50<span class="token punctuation">,</span>
            child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Align</span><span class="token punctuation">(</span>
                alignment<span class="token punctuation">:</span> <span class="token class-name">Alignment</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">0.0</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                child<span class="token punctuation">:</span> <span class="token class-name">FlutterLogo</span><span class="token punctuation">(</span>
                	size<span class="token punctuation">:</span> <span class="token number">60</span><span class="token punctuation">,</span>
                <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span>
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_3-positioned组件" tabindex="-1"><a class="header-anchor" href="#_3-positioned组件" aria-hidden="true">#</a> 3. <code v-pre>Positioned</code>组件</h3>
<p><code v-pre>Stack</code>组件中结合<code v-pre>Positioned</code>组件也可以控制每个子元素的显示位置</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code v-pre>top</code></td>
<td>子元素距离顶部的距离</td>
</tr>
<tr>
<td><code v-pre>bottom</code></td>
<td>子元素距离底部的距离</td>
</tr>
<tr>
<td><code v-pre>left</code></td>
<td>子元素距离左侧距离</td>
</tr>
<tr>
<td><code v-pre>right</code></td>
<td>子元素距离右侧距离</td>
</tr>
<tr>
<td><code v-pre>child</code></td>
<td>子组件</td>
</tr>
<tr>
<td><code v-pre>width</code></td>
<td>组件的高度 （注意：宽度和高度必须是固定值，没法使用<code v-pre>double.infinity</code>）</td>
</tr>
<tr>
<td><code v-pre>height </code></td>
<td>子组件的高度</td>
</tr>
</tbody>
</table>
<h4 id="fluttermediaquery获取屏幕宽度和高度" tabindex="-1"><a class="header-anchor" href="#fluttermediaquery获取屏幕宽度和高度" aria-hidden="true">#</a> <code v-pre>FlutterMediaQuery</code>获取屏幕宽度和高度</h4>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">final</span> size <span class="token operator">=</span> <span class="token class-name">MediaQuery</span><span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">.</span>size<span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>组件的<code v-pre>build</code>方法中可以通过，<code v-pre>MediaQuery.of(context).size</code>;</p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">final</span> size <span class="token operator">=</span><span class="token class-name">MediaQuery</span><span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">.</span>size<span class="token punctuation">;</span>
    <span class="token keyword">final</span> width <span class="token operator">=</span>size<span class="token punctuation">.</span>width<span class="token punctuation">;</span>
    <span class="token keyword">final</span> height <span class="token operator">=</span>size<span class="token punctuation">.</span>height<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="aspectratio组件" tabindex="-1"><a class="header-anchor" href="#aspectratio组件" aria-hidden="true">#</a> <code v-pre>AspectRatio</code>组件</h2>
<p>**<code v-pre>AspectRatio</code>**的作用是根据设置调整子元素<code v-pre>child</code>的宽高比。</p>
<p>**<code v-pre>AspectRatio</code>**首先会在布局限制条件允许的范围内尽可能的扩展，<code v-pre>widget</code>的高度是由宽度和比率决定 的，类似于<code v-pre>BoxFit</code>中的<code v-pre>contain</code>，按照固定比率去尽量占满区域</p>
<p>如果在满足所有限制条件过后无法找到一个可行的尺寸，<code v-pre>AspectRatio</code>最终将会去优先适应布局限制条 件，而忽略所设置的比率。</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code v-pre>aspectRatio</code></td>
<td>宽高比，最终可能不会根据这个值去布局，具体则要看综合因素，外层是否允许 按照这种比率进行布局，这只是一个参考值</td>
</tr>
<tr>
<td><code v-pre>child</code></td>
<td>子组件</td>
</tr>
</tbody>
</table>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">class</span> <span class="token class-name">MyAspectRatio</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token class-name">MyAspectRatio</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token metadata function">@override</span>
    <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">final</span> size <span class="token operator">=</span> <span class="token class-name">MediaQuery</span><span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">.</span>size<span class="token punctuation">;</span>

        <span class="token keyword">return</span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
            width<span class="token punctuation">:</span> size<span class="token punctuation">.</span>width<span class="token punctuation">,</span>
            color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>green<span class="token punctuation">,</span>
            child<span class="token punctuation">:</span> <span class="token class-name">AspectRatio</span><span class="token punctuation">(</span>
                aspectRatio<span class="token punctuation">:</span> <span class="token number">2</span><span class="token operator">/</span><span class="token number">1</span><span class="token punctuation">,</span>
                child<span class="token punctuation">:</span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
                	color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">,</span>
                <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="card组件" tabindex="-1"><a class="header-anchor" href="#card组件" aria-hidden="true">#</a> <code v-pre>Card</code>组件</h2>
<p><code v-pre>Card</code>是卡片组件块，内容可以由大多数类型的<code v-pre>Widget</code>构成，<code v-pre>Card</code>具有圆角和阴影，这让它看起来有立 体感。</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code v-pre>margin</code></td>
<td>外边距</td>
</tr>
<tr>
<td><code v-pre>child</code></td>
<td>子组件</td>
</tr>
<tr>
<td><code v-pre>elevation</code></td>
<td>阴影值的深度</td>
</tr>
<tr>
<td><code v-pre>color</code></td>
<td>背景颜色</td>
</tr>
<tr>
<td><code v-pre>shadowColor</code></td>
<td>阴影颜色</td>
</tr>
<tr>
<td><code v-pre>margin</code></td>
<td>外边距</td>
</tr>
<tr>
<td><code v-pre>clipBehavior</code></td>
<td><code v-pre>clipBehavior</code> 内容溢出的剪切方式 <code v-pre>Clip.none</code>不剪切 <code v-pre>Clip.hardEdge</code>裁剪但不应 用抗锯齿 <code v-pre>Clip.antiAlias</code>裁剪而且抗锯齿 <code v-pre>Clip.antiAliasWithSaveLayer</code>带有抗锯 齿的剪辑，并在剪辑之后立即保存<code v-pre>saveLayer</code></td>
</tr>
<tr>
<td><code v-pre>Shape</code></td>
<td><code v-pre>Card</code>的阴影效果，默认的阴影效果为圆角的长方形边。 <code v-pre>shape: const RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(10)) ),</code></td>
</tr>
</tbody>
</table>
<h2 id="按钮组件" tabindex="-1"><a class="header-anchor" href="#按钮组件" aria-hidden="true">#</a> 按钮组件</h2>
<h3 id="按钮组件的属性" tabindex="-1"><a class="header-anchor" href="#按钮组件的属性" aria-hidden="true">#</a> 按钮组件的属性</h3>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code v-pre>onPressed</code></td>
<td>必填参数，按下按钮时触发的回调，接收一个方法，传null表示按钮禁用，会显示 禁用相关样式</td>
</tr>
<tr>
<td><code v-pre>child</code></td>
<td>子组件</td>
</tr>
<tr>
<td><code v-pre>style</code></td>
<td>通过<code v-pre>ButtonStyle</code>装饰</td>
</tr>
</tbody>
</table>
<p><strong><code v-pre>ButtonStylee</code>里面的常用的参数</strong></p>
<table>
<thead>
<tr>
<th>属性名称</th>
<th>值类型</th>
<th>属性值</th>
</tr>
</thead>
<tbody>
<tr>
<td><code v-pre>foregroundColor</code></td>
<td><code v-pre>Color</code></td>
<td>文本颜色</td>
</tr>
<tr>
<td><code v-pre>backgroundColor</code></td>
<td><code v-pre>Color</code></td>
<td>按钮的颜色</td>
</tr>
<tr>
<td><code v-pre>shadowColor</code></td>
<td><code v-pre>Color</code></td>
<td>阴影颜色</td>
</tr>
<tr>
<td><code v-pre>elevation</code></td>
<td><code v-pre>double</code></td>
<td>阴影的范围，值越大阴影范围越大</td>
</tr>
<tr>
<td><code v-pre>padding</code></td>
<td></td>
<td>内边距</td>
</tr>
<tr>
<td><code v-pre>shape</code></td>
<td></td>
<td>设置按钮的形状 <code v-pre>shape: MaterialStateProperty.all( RoundedRectangleBorder( borderRadius: BorderRadius.circular(10)))</code></td>
</tr>
<tr>
<td><code v-pre>side</code></td>
<td>设置边 框</td>
<td><code v-pre>MaterialStateProperty.all(BorderSide(width:1,color: Colors.red))</code></td>
</tr>
</tbody>
</table>
<h3 id="elevatedbutton" tabindex="-1"><a class="header-anchor" href="#elevatedbutton" aria-hidden="true">#</a> <code v-pre>ElevatedButton</code></h3>
<p><code v-pre>ElevatedButton</code> 即&quot;凸起&quot;按钮，它默认带有阴影和灰色背景。按下后，阴影会变大</p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token class-name">ElevatedButton</span><span class="token punctuation">(</span>
    onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"普通按钮"</span></span><span class="token punctuation">)</span>
<span class="token punctuation">)</span>

<span class="token comment">// 配置圆形圆角按钮</span>
<span class="token class-name">ElevatedButton</span><span class="token punctuation">(</span>
  style<span class="token punctuation">:</span> <span class="token class-name">ButtonStyle</span><span class="token punctuation">(</span>
    backgroundColor<span class="token punctuation">:</span> <span class="token class-name">MaterialStateProperty</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token class-name">Colors</span><span class="token punctuation">.</span>blue<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 按钮的颜色</span>
    foregroundColor<span class="token punctuation">:</span> <span class="token class-name">MaterialStateProperty</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token class-name">Colors</span><span class="token punctuation">.</span>white<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 文本颜色</span>
    elevation<span class="token punctuation">:</span> <span class="token class-name">MaterialStateProperty</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    shape<span class="token punctuation">:</span> <span class="token class-name">MaterialStateProperty</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>
      <span class="token class-name">RoundedRectangleBorder</span><span class="token punctuation">(</span>
        borderRadius<span class="token punctuation">:</span> <span class="token class-name">BorderRadius</span><span class="token punctuation">.</span><span class="token function">circular</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">)</span>
      <span class="token punctuation">)</span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">)</span><span class="token punctuation">,</span>
  onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">print</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"圆角按钮"</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"圆角"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="textbutton" tabindex="-1"><a class="header-anchor" href="#textbutton" aria-hidden="true">#</a> <code v-pre>TextButton</code></h3>
<p><code v-pre>TextButton</code> 即文本按钮，默认背景透明并不带阴影。按下后，会有背景色</p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token class-name">TextButton</span><span class="token punctuation">(</span>
    child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"文本按钮"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="outlinedbutton" tabindex="-1"><a class="header-anchor" href="#outlinedbutton" aria-hidden="true">#</a> <code v-pre>OutlinedButton</code></h3>
<p><code v-pre>OutlineButton</code> 默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影</p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token class-name">OutlinedButton</span><span class="token punctuation">(</span>
    child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"边框按钮"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span>
    
<span class="token comment">// 修改OutlinedButton边框</span>
<span class="token class-name">OutlinedButton</span><span class="token punctuation">(</span>
    style<span class="token punctuation">:</span> <span class="token class-name">ButtonStyle</span><span class="token punctuation">(</span>
    foregroundColor<span class="token punctuation">:</span>
    	<span class="token class-name">MaterialStateProperty</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token class-name">Colors</span><span class="token punctuation">.</span>black<span class="token punctuation">)</span><span class="token punctuation">,</span>
    side<span class="token punctuation">:</span> <span class="token class-name">MaterialStateProperty</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>
    	<span class="token keyword">const</span> <span class="token class-name">BorderSide</span><span class="token punctuation">(</span>width<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>red<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"注册 配置边框"</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="iconbutton" tabindex="-1"><a class="header-anchor" href="#iconbutton" aria-hidden="true">#</a> <code v-pre>IconButton</code></h3>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token class-name">IconButton</span><span class="token punctuation">(</span>
    icon<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>thumb_up<span class="token punctuation">)</span><span class="token punctuation">,</span>
    onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="带图标的按钮" tabindex="-1"><a class="header-anchor" href="#带图标的按钮" aria-hidden="true">#</a> 带图标的按钮</h3>
<p><code v-pre>ElevatedButton </code>、<code v-pre> TextButton</code> 、<code v-pre> OutlineButton</code> 都有一个 <code v-pre>icon</code> 构造函数，通过它可以轻松创建带图标的按钮</p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token class-name">ElevatedButton</span><span class="token punctuation">.</span><span class="token function">icon</span><span class="token punctuation">(</span>
    icon<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>send<span class="token punctuation">)</span><span class="token punctuation">,</span>
    label<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"发送"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    onPressed<span class="token punctuation">:</span> _onPressed<span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token class-name">OutlineButton</span><span class="token punctuation">.</span><span class="token function">icon</span><span class="token punctuation">(</span>
    icon<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>add<span class="token punctuation">)</span><span class="token punctuation">,</span>
    label<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"添加"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    onPressed<span class="token punctuation">:</span> _onPressed<span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token class-name">TextButton</span><span class="token punctuation">.</span><span class="token function">icon</span><span class="token punctuation">(</span>
    icon<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>info<span class="token punctuation">)</span><span class="token punctuation">,</span>
    label<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"详情"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    onPressed<span class="token punctuation">:</span> _onPressed<span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="wrap组件" tabindex="-1"><a class="header-anchor" href="#wrap组件" aria-hidden="true">#</a> <code v-pre>Wrap</code>组件</h2>
<p><code v-pre>Wrap</code>可以实现流布局，单行的<code v-pre>Wrap</code>跟<code v-pre>Row</code>表现几乎一致，单列的<code v-pre>Wrap</code>则跟<code v-pre>Column</code>表现几乎一致。但 <code v-pre>Row</code>与<code v-pre>Column</code>都是单行单列的，<code v-pre>Wrap</code>则突破了这个限制，<code v-pre>mainAxis</code>上空间不足时，则向<code v-pre>crossAxis</code>上 去扩展显示。</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code v-pre>direction</code></td>
<td>主轴的方向，默认水平</td>
</tr>
<tr>
<td><code v-pre>alignment</code></td>
<td>主轴的对其方式</td>
</tr>
<tr>
<td><code v-pre>spacing</code></td>
<td>主轴方向上的间距</td>
</tr>
<tr>
<td><code v-pre>textDirection</code></td>
<td>文本方向</td>
</tr>
<tr>
<td><code v-pre>verticalDirection</code></td>
<td>定义了<code v-pre>children</code>摆放顺序，默认是<code v-pre>down</code>，见<code v-pre>Flex</code>相关属性介绍。</td>
</tr>
<tr>
<td><code v-pre>runAlignment </code></td>
<td><code v-pre>run</code>的对齐方式。<code v-pre>run</code>可以理解为新的行或者列，如果是水平方向布局的话， <code v-pre>run</code>可以理解为新的一行</td>
</tr>
<tr>
<td><code v-pre>runSpacing </code></td>
<td><code v-pre>run</code>的间距</td>
</tr>
</tbody>
</table>
<h2 id="floatingactionbutton实现类似闲鱼app底-部导航凸起按钮" tabindex="-1"><a class="header-anchor" href="#floatingactionbutton实现类似闲鱼app底-部导航凸起按钮" aria-hidden="true">#</a> <code v-pre>FloatingActionButton</code>实现类似闲鱼<code v-pre>App</code>底 部导航凸起按钮</h2>
<p><code v-pre>FloatingActionButton</code>简称<code v-pre>FAB</code> ,可以实现浮动按钮，也可以实现类似闲鱼<code v-pre>app</code>的底部凸起导航</p>
<table>
<thead>
<tr>
<th>属性名称</th>
<th>属性值</th>
</tr>
</thead>
<tbody>
<tr>
<td><code v-pre>child</code></td>
<td>子视图，一般为<code v-pre>Icon</code>，不推荐使用文字</td>
</tr>
<tr>
<td><code v-pre>tooltip</code></td>
<td><code v-pre>FAB</code>被长按时显示，也是无障碍功能</td>
</tr>
<tr>
<td><code v-pre>backgroundColor</code></td>
<td>背景颜色</td>
</tr>
<tr>
<td><code v-pre>elevation</code></td>
<td>未点击的时候的阴影</td>
</tr>
<tr>
<td><code v-pre>hignlightElevation</code></td>
<td>点击时阴影值，默认12.0</td>
</tr>
<tr>
<td><code v-pre>onPressed</code></td>
<td>点击事件回调</td>
</tr>
<tr>
<td><code v-pre>shape</code></td>
<td>可以定义<code v-pre>FAB</code>的形状等</td>
</tr>
<tr>
<td><code v-pre>mini </code></td>
<td>是否是<code v-pre>mini</code>类型默认<code v-pre>false</code></td>
</tr>
</tbody>
</table>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'package:flutter/material.dart'</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'tabs/home.dart'</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'tabs/category.dart'</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'tabs/setting.dart'</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'tabs/user.dart'</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'tabs/message.dart'</span></span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">Tabs</span> <span class="token keyword">extends</span> <span class="token class-name">StatefulWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token class-name">Tabs</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">State</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Tabs</span><span class="token punctuation">></span></span> <span class="token function">createState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">_tabsState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> _tabsState <span class="token keyword">extends</span> <span class="token class-name">State</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Tabs</span><span class="token punctuation">></span></span> <span class="token punctuation">{</span>
  int _currentIndex <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token keyword">final</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Widget</span><span class="token punctuation">></span></span> _pages <span class="token operator">=</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>
    <span class="token class-name">HomePage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token class-name">CategoryPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token class-name">MessagePage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token class-name">SettingPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token class-name">UserPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token class-name">Scaffold</span><span class="token punctuation">(</span>
      appBar<span class="token punctuation">:</span> <span class="token class-name">AppBar</span><span class="token punctuation">(</span>
        title<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"Pages"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
      body<span class="token punctuation">:</span> _pages<span class="token punctuation">[</span>_currentIndex<span class="token punctuation">]</span><span class="token punctuation">,</span>
      bottomNavigationBar<span class="token punctuation">:</span> <span class="token class-name">BottomNavigationBar</span><span class="token punctuation">(</span>
        currentIndex<span class="token punctuation">:</span> _currentIndex<span class="token punctuation">,</span>
        fixedColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>pink<span class="token punctuation">,</span>
        type<span class="token punctuation">:</span> <span class="token class-name">BottomNavigationBarType</span><span class="token punctuation">.</span>fixed<span class="token punctuation">,</span>
        onTap<span class="token punctuation">:</span> <span class="token punctuation">(</span>index<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            _currentIndex <span class="token operator">=</span> index<span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        items<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>
          <span class="token class-name">BottomNavigationBarItem</span><span class="token punctuation">(</span>
            icon<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>home<span class="token punctuation">)</span><span class="token punctuation">,</span>
            label<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">"首页"</span></span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token class-name">BottomNavigationBarItem</span><span class="token punctuation">(</span>
            icon<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>category<span class="token punctuation">)</span><span class="token punctuation">,</span>
            label<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">"分类"</span></span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token class-name">BottomNavigationBarItem</span><span class="token punctuation">(</span>
            icon<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">,</span>
            label<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">"消息"</span></span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token class-name">BottomNavigationBarItem</span><span class="token punctuation">(</span>
            icon<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>settings<span class="token punctuation">)</span><span class="token punctuation">,</span>
            label<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">"设置"</span></span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token class-name">BottomNavigationBarItem</span><span class="token punctuation">(</span>
            icon<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>people<span class="token punctuation">)</span><span class="token punctuation">,</span>
            label<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">"用户"</span></span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
      floatingActionButton<span class="token punctuation">:</span><span class="token class-name">Container</span><span class="token punctuation">(</span>
        width<span class="token punctuation">:</span> <span class="token number">60</span><span class="token punctuation">,</span>
        height<span class="token punctuation">:</span> <span class="token number">60</span><span class="token punctuation">,</span>
        padding<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        margin<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">only</span><span class="token punctuation">(</span>top<span class="token punctuation">:</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        decoration<span class="token punctuation">:</span> <span class="token class-name">BoxDecoration</span><span class="token punctuation">(</span>
          color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>amber<span class="token punctuation">,</span>
          borderRadius<span class="token punctuation">:</span> <span class="token class-name">BorderRadius</span><span class="token punctuation">.</span><span class="token function">circular</span><span class="token punctuation">(</span><span class="token number">30</span><span class="token punctuation">)</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
        child<span class="token punctuation">:</span> <span class="token class-name">FloatingActionButton</span><span class="token punctuation">(</span>
          backgroundColor<span class="token punctuation">:</span> _currentIndex<span class="token operator">==</span><span class="token number">2</span><span class="token operator">?</span><span class="token class-name">Colors</span><span class="token punctuation">.</span>amber<span class="token punctuation">:</span><span class="token class-name">Colors</span><span class="token punctuation">.</span>green<span class="token punctuation">,</span>
          onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
              _currentIndex <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>add<span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
      floatingActionButtonLocation<span class="token punctuation">:</span> <span class="token class-name">FloatingActionButtonLocation</span><span class="token punctuation">.</span>centerDocked<span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="drawer抽屉菜单" tabindex="-1"><a class="header-anchor" href="#drawer抽屉菜单" aria-hidden="true">#</a> <code v-pre>Drawer</code>抽屉菜单</h2>
<p>在<code v-pre>Scaffold</code>组件里面传入<code v-pre>drawe</code>r参数可以定义左侧边栏，传入<code v-pre>endDrawer</code>可以定义右侧边栏。侧边栏默 认是隐藏的，我们可以通过手指滑动显示侧边栏，也可以通过点击按钮显示侧边栏。</p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">return</span> <span class="token class-name">Scaffold</span><span class="token punctuation">(</span>
    appBar<span class="token punctuation">:</span> <span class="token class-name">AppBar</span><span class="token punctuation">(</span>
    	title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"Flutter App"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">,</span>
    drawer<span class="token punctuation">:</span> <span class="token class-name">Drawer</span><span class="token punctuation">(</span>
    	child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'左侧边栏'</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">,</span>
    endDrawer<span class="token punctuation">:</span> <span class="token class-name">Drawer</span><span class="token punctuation">(</span>
    	child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'右侧侧边栏'</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="drawerheader" tabindex="-1"><a class="header-anchor" href="#drawerheader" aria-hidden="true">#</a> <code v-pre>DrawerHeader</code></h3>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code v-pre>decoration </code></td>
<td>设置顶部背景颜色</td>
</tr>
<tr>
<td><code v-pre>child</code></td>
<td>配置子元素</td>
</tr>
<tr>
<td><code v-pre>padding </code></td>
<td>内边距</td>
</tr>
<tr>
<td><code v-pre>margin </code></td>
<td>外边距</td>
</tr>
</tbody>
</table>
<h3 id="useraccountsdrawerheader" tabindex="-1"><a class="header-anchor" href="#useraccountsdrawerheader" aria-hidden="true">#</a> <code v-pre>UserAccountsDrawerHeader</code></h3>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code v-pre>decoration</code></td>
<td>设置顶部背景颜色</td>
</tr>
<tr>
<td><code v-pre>accountName</code></td>
<td>账户名称</td>
</tr>
<tr>
<td><code v-pre>accountEmail </code></td>
<td>账户邮箱</td>
</tr>
<tr>
<td><code v-pre>currentAccountPicture</code></td>
<td>用户头像</td>
</tr>
<tr>
<td><code v-pre>otherAccountsPictures</code></td>
<td>用来设置当前账户其他账户头像</td>
</tr>
<tr>
<td><code v-pre>margin</code></td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="appbar-tabbar-tabbarview" tabindex="-1"><a class="header-anchor" href="#appbar-tabbar-tabbarview" aria-hidden="true">#</a> <code v-pre>AppBar </code>     <code v-pre>TabBar</code>    <code v-pre>TabBarView</code></h2>
<h3 id="appbar自定义顶部按钮图标、颜色" tabindex="-1"><a class="header-anchor" href="#appbar自定义顶部按钮图标、颜色" aria-hidden="true">#</a> <code v-pre>AppBar</code>自定义顶部按钮图标、颜色</h3>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code v-pre>leading</code></td>
<td>在标题前面显示的一个控件，在首页通常显示应用的 <code v-pre>logo</code>；在其他界面通 常显示为返回按钮</td>
</tr>
<tr>
<td><code v-pre>title</code></td>
<td>标题，通常显示为当前界面的标题文字，可以放组件</td>
</tr>
<tr>
<td><code v-pre>actions</code></td>
<td>通常使用 <code v-pre>IconButton</code> 来表示，可以放按钮组</td>
</tr>
<tr>
<td><code v-pre>bottom</code></td>
<td>通常放<code v-pre>tabBar</code>，标题下面显示一个 Tab 导航栏</td>
</tr>
<tr>
<td><code v-pre>backgroundColor </code></td>
<td>导航背景颜色</td>
</tr>
<tr>
<td><code v-pre>iconTheme</code></td>
<td>图标样式</td>
</tr>
<tr>
<td><code v-pre>centerTitle</code></td>
<td>标题是否居中显示</td>
</tr>
</tbody>
</table>
<h3 id="appbar结合tabbar实现顶部tab切换" tabindex="-1"><a class="header-anchor" href="#appbar结合tabbar实现顶部tab切换" aria-hidden="true">#</a> <code v-pre>AppBar</code>结合<code v-pre>TabBar</code>实现顶部<code v-pre>Tab</code>切换</h3>
<p><strong><code v-pre>TabBar</code>常见属性：</strong></p>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code v-pre>tabs</code></td>
<td>显示的标签内容，一般使用<code v-pre>Tab</code>对象,也可以是其他的<code v-pre>Widget</code></td>
</tr>
<tr>
<td><code v-pre>controller</code></td>
<td><code v-pre>TabController</code>对象</td>
</tr>
<tr>
<td><code v-pre>isScrollable</code></td>
<td>是否可滚动</td>
</tr>
<tr>
<td><code v-pre>indicatorColor</code></td>
<td>指示器颜色</td>
</tr>
<tr>
<td><code v-pre>indicatorWeight</code></td>
<td>指示器高度</td>
</tr>
<tr>
<td><code v-pre>indicatorPadding</code></td>
<td>底部指示器的<code v-pre>Padding</code></td>
</tr>
<tr>
<td><code v-pre>indicator</code></td>
<td>指示器<code v-pre>decoration</code>，例如边框等</td>
</tr>
<tr>
<td><code v-pre>indicatorSize</code></td>
<td>指示器大小计算方式，<code v-pre>TabBarIndicatorSize.label</code>跟文字等 宽<code v-pre>,TabBarIndicatorSize.tab</code>跟每个tab等宽</td>
</tr>
<tr>
<td><code v-pre>labelColor</code></td>
<td>选中<code v-pre>label</code>颜色</td>
</tr>
<tr>
<td><code v-pre>labelStyle</code></td>
<td>选中<code v-pre>label</code>的<code v-pre>Style</code></td>
</tr>
<tr>
<td><code v-pre>labelPadding</code></td>
<td>每个<code v-pre>label</code>的<code v-pre>padding</code>值</td>
</tr>
<tr>
<td><code v-pre>unselectedLabelColor</code></td>
<td>未选中<code v-pre>label</code>颜色</td>
</tr>
<tr>
<td><code v-pre>unselectedLabelStyle</code></td>
<td>未选中<code v-pre>label</code>的<code v-pre>Style</code></td>
</tr>
</tbody>
</table>
<h3 id="tabbar-tabbarview实现类似头条顶部导航" tabindex="-1"><a class="header-anchor" href="#tabbar-tabbarview实现类似头条顶部导航" aria-hidden="true">#</a> <code v-pre>Tabbar</code>   <code v-pre>TabBarView</code>实现类似头条顶部导航</h3>
<h4 id="_1-混入singletickerproviderstatemixin" tabindex="-1"><a class="header-anchor" href="#_1-混入singletickerproviderstatemixin" aria-hidden="true">#</a> 1. 混入<code v-pre>SingleTickerProviderStateMixin</code></h4>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">class</span> _HomePageState <span class="token keyword">extends</span> <span class="token class-name">State</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">HomePage</span><span class="token punctuation">></span></span> <span class="token keyword">with</span> <span class="token class-name">SingleTickerProviderStateMixin</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h4 id="_2-定义tabcontroller" tabindex="-1"><a class="header-anchor" href="#_2-定义tabcontroller" aria-hidden="true">#</a> 2.定义<code v-pre>TabController</code></h4>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code> late <span class="token class-name">TabController</span> _tabController<span class="token punctuation">;</span>

  <span class="token metadata function">@override</span>
  <span class="token keyword">void</span> <span class="token function">initState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// TODO: implement initState</span>
    <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">initState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    _tabController <span class="token operator">=</span> <span class="token class-name">TabController</span><span class="token punctuation">(</span>length<span class="token punctuation">:</span> <span class="token number">9</span><span class="token punctuation">,</span> vsync<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 监听_tabController的改变事件</span>
    _tabController<span class="token punctuation">.</span><span class="token function">addListener</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// print(_tabController.index); // 获取两次</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>_tabController<span class="token punctuation">.</span>animation<span class="token operator">!</span><span class="token punctuation">.</span>value <span class="token operator">==</span> _tabController<span class="token punctuation">.</span>index<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">print</span><span class="token punctuation">(</span>_tabController<span class="token punctuation">.</span>index<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="_3-配置tabbar和tabbarview" tabindex="-1"><a class="header-anchor" href="#_3-配置tabbar和tabbarview" aria-hidden="true">#</a> 3. 配置<code v-pre>TabBar</code>和<code v-pre>TabBarView</code></h4>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'package:flutter/material.dart'</span></span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">MyTabBar</span> <span class="token keyword">extends</span> <span class="token class-name">StatefulWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token class-name">MyTabBar</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">State</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">MyTabBar</span><span class="token punctuation">></span></span> <span class="token function">createState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">_MyTabBarState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> _MyTabBarState <span class="token keyword">extends</span> <span class="token class-name">State</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">MyTabBar</span><span class="token punctuation">></span></span>
    <span class="token keyword">with</span> <span class="token class-name">SingleTickerProviderStateMixin</span> <span class="token punctuation">{</span>
  late <span class="token class-name">TabController</span> _tabController<span class="token punctuation">;</span>

  <span class="token comment">// 生命周期函数：当组件初始化的时候会触发</span>
  <span class="token metadata function">@override</span>
  <span class="token keyword">void</span> <span class="token function">initState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// TODO: implement initState</span>
    <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">initState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    _tabController <span class="token operator">=</span> <span class="token class-name">TabController</span><span class="token punctuation">(</span>length<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> vsync<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token class-name">Scaffold</span><span class="token punctuation">(</span>
      appBar<span class="token punctuation">:</span> <span class="token class-name">AppBar</span><span class="token punctuation">(</span>
        leading<span class="token punctuation">:</span> <span class="token class-name">IconButton</span><span class="token punctuation">(</span>
          <span class="token comment">// 左侧按钮图标</span>
          onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
          icon<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>menu<span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
        title<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"头条滑动导航"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        backgroundColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>red<span class="token punctuation">,</span>
        actions<span class="token punctuation">:</span> <span class="token punctuation">[</span>
          <span class="token comment">// 右侧按钮图标</span>
          <span class="token class-name">IconButton</span><span class="token punctuation">(</span>onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> icon<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>search<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token class-name">IconButton</span><span class="token punctuation">(</span>onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> icon<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>more_horiz<span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
        bottom<span class="token punctuation">:</span> <span class="token class-name">TabBar</span><span class="token punctuation">(</span>
          isScrollable<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
          controller<span class="token punctuation">:</span> _tabController<span class="token punctuation">,</span>
          indicatorColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>white<span class="token punctuation">,</span>
          indicatorWeight<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
          indicatorPadding<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          indicatorSize<span class="token punctuation">:</span> <span class="token class-name">TabBarIndicatorSize</span><span class="token punctuation">.</span>label<span class="token punctuation">,</span>
          labelColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>black<span class="token punctuation">,</span>
          labelStyle<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>
            fontSize<span class="token punctuation">:</span> <span class="token number">15</span><span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          unselectedLabelColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>teal<span class="token punctuation">,</span>
          unselectedLabelStyle<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>
            fontSize<span class="token punctuation">:</span> <span class="token number">13</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token comment">// indicator: BoxDecoration(</span>
          <span class="token comment">//   color: Colors.blue,</span>
          <span class="token comment">//   borderRadius: BorderRadius.circular(10)</span>
          <span class="token comment">// ),</span>
          tabs<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>
            <span class="token class-name">Tab</span><span class="token punctuation">(</span>
              child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"关注"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token class-name">Tab</span><span class="token punctuation">(</span>
              child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"热门"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token class-name">Tab</span><span class="token punctuation">(</span>
              child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"视频"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
      body<span class="token punctuation">:</span> <span class="token class-name">TabBarView</span><span class="token punctuation">(</span>controller<span class="token punctuation">:</span> _tabController<span class="token punctuation">,</span> children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是关注"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token class-name">ListView</span><span class="token punctuation">(</span>children<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>
          <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
            title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是热门列表"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
            title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是热门列表"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
            title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是热门列表"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token class-name">ListView</span><span class="token punctuation">(</span>children<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>
          <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
            title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是视频列表"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
            title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是视频列表"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
            title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是视频列表"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="_4-bottomnavigationbar-的页面中使用tabbar" tabindex="-1"><a class="header-anchor" href="#_4-bottomnavigationbar-的页面中使用tabbar" aria-hidden="true">#</a> 4.  <code v-pre>BottomNavigationBar</code> 的页面中使用<code v-pre>Tabbar</code></h4>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'package:flutter/material.dart'</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'tabs/home.dart'</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'tabs/category.dart'</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'tabs/setting.dart'</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'tabs/user.dart'</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'tabs/message.dart'</span></span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">Tabs</span> <span class="token keyword">extends</span> <span class="token class-name">StatefulWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token class-name">Tabs</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">State</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Tabs</span><span class="token punctuation">></span></span> <span class="token function">createState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">_tabsState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> _tabsState <span class="token keyword">extends</span> <span class="token class-name">State</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Tabs</span><span class="token punctuation">></span></span> <span class="token punctuation">{</span>
  int _currentIndex <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token keyword">final</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Widget</span><span class="token punctuation">></span></span> _pages <span class="token operator">=</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>
    <span class="token class-name">HomePage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token class-name">CategoryPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token class-name">MessagePage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token class-name">SettingPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token class-name">UserPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token class-name">Scaffold</span><span class="token punctuation">(</span>
      appBar<span class="token punctuation">:</span> <span class="token class-name">AppBar</span><span class="token punctuation">(</span>
        leading<span class="token punctuation">:</span> <span class="token class-name">IconButton</span><span class="token punctuation">(</span>
          <span class="token comment">// 左侧按钮图标</span>
          onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
          icon<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>menu<span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
        title<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"头条滑动导航"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        backgroundColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>red<span class="token punctuation">,</span>
        actions<span class="token punctuation">:</span> <span class="token punctuation">[</span>
          <span class="token comment">// 右侧按钮图标</span>
          <span class="token class-name">IconButton</span><span class="token punctuation">(</span>onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> icon<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>search<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token class-name">IconButton</span><span class="token punctuation">(</span>onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> icon<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>more_horiz<span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
      body<span class="token punctuation">:</span> _pages<span class="token punctuation">[</span>_currentIndex<span class="token punctuation">]</span><span class="token punctuation">,</span>
      bottomNavigationBar<span class="token punctuation">:</span> <span class="token class-name">BottomNavigationBar</span><span class="token punctuation">(</span>
        currentIndex<span class="token punctuation">:</span> _currentIndex<span class="token punctuation">,</span>
        fixedColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>pink<span class="token punctuation">,</span>
        type<span class="token punctuation">:</span> <span class="token class-name">BottomNavigationBarType</span><span class="token punctuation">.</span>fixed<span class="token punctuation">,</span>
        onTap<span class="token punctuation">:</span> <span class="token punctuation">(</span>index<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            _currentIndex <span class="token operator">=</span> index<span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        items<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>
          <span class="token class-name">BottomNavigationBarItem</span><span class="token punctuation">(</span>
            icon<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>home<span class="token punctuation">)</span><span class="token punctuation">,</span>
            label<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">"首页"</span></span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token class-name">BottomNavigationBarItem</span><span class="token punctuation">(</span>
            icon<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>category<span class="token punctuation">)</span><span class="token punctuation">,</span>
            label<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">"分类"</span></span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token class-name">BottomNavigationBarItem</span><span class="token punctuation">(</span>
            icon<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">,</span>
            label<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">"消息"</span></span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token class-name">BottomNavigationBarItem</span><span class="token punctuation">(</span>
            icon<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>settings<span class="token punctuation">)</span><span class="token punctuation">,</span>
            label<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">"设置"</span></span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token class-name">BottomNavigationBarItem</span><span class="token punctuation">(</span>
            icon<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>people<span class="token punctuation">)</span><span class="token punctuation">,</span>
            label<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">"用户"</span></span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
      floatingActionButton<span class="token punctuation">:</span><span class="token class-name">Container</span><span class="token punctuation">(</span>
        width<span class="token punctuation">:</span> <span class="token number">60</span><span class="token punctuation">,</span>
        height<span class="token punctuation">:</span> <span class="token number">60</span><span class="token punctuation">,</span>
        padding<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        margin<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">only</span><span class="token punctuation">(</span>top<span class="token punctuation">:</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        decoration<span class="token punctuation">:</span> <span class="token class-name">BoxDecoration</span><span class="token punctuation">(</span>
          color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>amber<span class="token punctuation">,</span>
          borderRadius<span class="token punctuation">:</span> <span class="token class-name">BorderRadius</span><span class="token punctuation">.</span><span class="token function">circular</span><span class="token punctuation">(</span><span class="token number">30</span><span class="token punctuation">)</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
        child<span class="token punctuation">:</span> <span class="token class-name">FloatingActionButton</span><span class="token punctuation">(</span>
          backgroundColor<span class="token punctuation">:</span> _currentIndex<span class="token operator">==</span><span class="token number">2</span><span class="token operator">?</span><span class="token class-name">Colors</span><span class="token punctuation">.</span>amber<span class="token punctuation">:</span><span class="token class-name">Colors</span><span class="token punctuation">.</span>green<span class="token punctuation">,</span>
          onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
              _currentIndex <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>add<span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
      floatingActionButtonLocation<span class="token punctuation">:</span> <span class="token class-name">FloatingActionButtonLocation</span><span class="token punctuation">.</span>centerDocked<span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'package:flutter/material.dart'</span></span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'package:flutter3_andriod/tools/KeepAliveWrapper.dart'</span></span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">HomePage</span> <span class="token keyword">extends</span> <span class="token class-name">StatefulWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token class-name">HomePage</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">State</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">HomePage</span><span class="token punctuation">></span></span> <span class="token function">createState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">_HomePageState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> _HomePageState <span class="token keyword">extends</span> <span class="token class-name">State</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">HomePage</span><span class="token punctuation">></span></span>
    <span class="token keyword">with</span> <span class="token class-name">SingleTickerProviderStateMixin</span> <span class="token punctuation">{</span>
  late <span class="token class-name">TabController</span> _tabController<span class="token punctuation">;</span>

  <span class="token metadata function">@override</span>
  <span class="token keyword">void</span> <span class="token function">initState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// TODO: implement initState</span>
    <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">initState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    _tabController <span class="token operator">=</span> <span class="token class-name">TabController</span><span class="token punctuation">(</span>length<span class="token punctuation">:</span> <span class="token number">9</span><span class="token punctuation">,</span> vsync<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 监听_tabController的改变事件</span>
    _tabController<span class="token punctuation">.</span><span class="token function">addListener</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// print(_tabController.index); // 获取两次</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>_tabController<span class="token punctuation">.</span>animation<span class="token operator">!</span><span class="token punctuation">.</span>value <span class="token operator">==</span> _tabController<span class="token punctuation">.</span>index<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">print</span><span class="token punctuation">(</span>_tabController<span class="token punctuation">.</span>index<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// 组件销毁的时候触发</span>
  <span class="token metadata function">@override</span>
  <span class="token keyword">void</span> <span class="token function">dispose</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// TODO: implement dispose</span>
    <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">dispose</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 销毁_tabController</span>
    _tabController<span class="token punctuation">.</span><span class="token function">dispose</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token class-name">Scaffold</span><span class="token punctuation">(</span>
      appBar<span class="token punctuation">:</span> <span class="token class-name">PreferredSize</span><span class="token punctuation">(</span>
        preferredSize<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Size</span><span class="token punctuation">.</span><span class="token function">fromHeight</span><span class="token punctuation">(</span><span class="token number">40</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        child<span class="token punctuation">:</span> <span class="token class-name">AppBar</span><span class="token punctuation">(</span>
          elevation<span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span>
          backgroundColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>white<span class="token punctuation">,</span>
          title<span class="token punctuation">:</span> <span class="token class-name">SizedBox</span><span class="token punctuation">(</span>
            height<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">,</span>
            child<span class="token punctuation">:</span> <span class="token class-name">TabBar</span><span class="token punctuation">(</span>
              isScrollable<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
              controller<span class="token punctuation">:</span> _tabController<span class="token punctuation">,</span>
              labelColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>red<span class="token punctuation">,</span>
              labelStyle<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>
                fontSize<span class="token punctuation">:</span> <span class="token number">15</span><span class="token punctuation">,</span>
                fontWeight<span class="token punctuation">:</span> <span class="token class-name">FontWeight</span><span class="token punctuation">.</span>w500
              <span class="token punctuation">)</span><span class="token punctuation">,</span>
              indicatorSize<span class="token punctuation">:</span> <span class="token class-name">TabBarIndicatorSize</span><span class="token punctuation">.</span>label<span class="token punctuation">,</span>
              indicatorColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>red<span class="token punctuation">,</span> <span class="token comment">// 底部指示器的颜色</span>
              unselectedLabelColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>black<span class="token punctuation">,</span> <span class="token comment">// lable未选择的颜色</span>
              onTap<span class="token punctuation">:</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 只能监听点击事件，无法监听滑动</span>
              tabs<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>
                <span class="token class-name">Tab</span><span class="token punctuation">(</span>
                  child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"关注"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token class-name">Tab</span><span class="token punctuation">(</span>
                  child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"热门"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token class-name">Tab</span><span class="token punctuation">(</span>
                  child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"视频"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token class-name">Tab</span><span class="token punctuation">(</span>
                  child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"Tab4"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token class-name">Tab</span><span class="token punctuation">(</span>
                  child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"Tab5"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token class-name">Tab</span><span class="token punctuation">(</span>
                  child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"Tab6"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token class-name">Tab</span><span class="token punctuation">(</span>
                  child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"Tab7"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token class-name">Tab</span><span class="token punctuation">(</span>
                  child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"Tab8"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token class-name">Tab</span><span class="token punctuation">(</span>
                  child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"Tab9"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token punctuation">)</span><span class="token punctuation">,</span>
              <span class="token punctuation">]</span>
            <span class="token punctuation">)</span>
          <span class="token punctuation">)</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
      body<span class="token punctuation">:</span> <span class="token class-name">TabBarView</span><span class="token punctuation">(</span>controller<span class="token punctuation">:</span> _tabController<span class="token punctuation">,</span> children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token class-name">KeepAliveWrapper</span><span class="token punctuation">(</span>chind<span class="token punctuation">:</span> <span class="token class-name">ListView</span><span class="token punctuation">(</span> <span class="token comment">// 自定义缓存组件</span>
          children<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>
            <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
              title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是关注列表1"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
              title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是关注列表2"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
              title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是关注列表3"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
              title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是关注列表4"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
              title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是关注列表5"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
              title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是关注列表6"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
              title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是关注列表7"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
              title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是关注列表8"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
              title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是关注列表9"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
              title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是关注列表10"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
              title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是关注列表1"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
              title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是关注列表1"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
              title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是关注列表1"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
              title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是关注列表1"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
              title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是关注列表1"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
              title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是关注列表1"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token class-name">ListTile</span><span class="token punctuation">(</span>
              title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是关注列表1"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是热门"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是视频"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是Tab4"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是Tab5"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是Tab6"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是Tab7"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是Tab8"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"我是Tab9"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="_5-preferredsize组件" tabindex="-1"><a class="header-anchor" href="#_5-preferredsize组件" aria-hidden="true">#</a> 5.  <code v-pre>preferredSize</code>组件</h4>
<p><code v-pre>PreferredSize</code>可以改变<code v-pre>appBar</code>的高度</p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token class-name">Scaffold</span><span class="token punctuation">(</span>
    appBar<span class="token punctuation">:</span> <span class="token class-name">PreferredSize</span><span class="token punctuation">(</span>
        preferredSize<span class="token punctuation">:</span> <span class="token class-name">Size</span><span class="token punctuation">.</span><span class="token function">fromHeight</span><span class="token punctuation">(</span><span class="token number">50</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        child<span class="token punctuation">:</span> <span class="token class-name">AppBar</span><span class="token punctuation">(</span>
        <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
        <span class="token punctuation">)</span>
    <span class="token punctuation">)</span><span class="token punctuation">,</span>
    body<span class="token punctuation">:</span> <span class="token class-name">Test</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="_6-自定义keepalivewrapper-缓存页面" tabindex="-1"><a class="header-anchor" href="#_6-自定义keepalivewrapper-缓存页面" aria-hidden="true">#</a> 6. 自定义<code v-pre>KeepAliveWrapper </code>缓存页面</h4>
<p><code v-pre>AutomaticKeepAliveClientMixin</code>可以快速的实现页面缓存功能，但是通过混入的方式实现不是很优 雅， 所以我们有必要对<code v-pre>AutomaticKeepAliveClientMixin </code>混入进行封装</p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'package:flutter/material.dart'</span></span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">KeepAliveWrapper</span> <span class="token keyword">extends</span> <span class="token class-name">StatefulWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token class-name">KeepAliveWrapper</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">,</span> required <span class="token keyword">this</span><span class="token punctuation">.</span>chind<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>keepAlive <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">final</span> <span class="token class-name">Widget</span><span class="token operator">?</span> chind<span class="token punctuation">;</span>
  <span class="token keyword">final</span> bool keepAlive<span class="token punctuation">;</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">State</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">KeepAliveWrapper</span><span class="token punctuation">></span></span> <span class="token function">createState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">_KeepAliveWrapperState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> _KeepAliveWrapperState <span class="token keyword">extends</span> <span class="token class-name">State</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">KeepAliveWrapper</span><span class="token punctuation">></span></span> <span class="token keyword">with</span> <span class="token class-name">AutomaticKeepAliveClientMixin</span> <span class="token punctuation">{</span>
  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> widget<span class="token punctuation">.</span>chind<span class="token operator">!</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token metadata function">@override</span>
  bool <span class="token keyword">get</span> wantKeepAlive <span class="token operator">=</span><span class="token operator">></span> widget<span class="token punctuation">.</span>keepAlive<span class="token punctuation">;</span>

  <span class="token metadata function">@override</span>
  <span class="token keyword">void</span> <span class="token function">didUpdateWidget</span><span class="token punctuation">(</span><span class="token keyword">covariant</span> <span class="token class-name">KeepAliveWrapper</span> oldWidget<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>oldWidget<span class="token punctuation">.</span>keepAlive <span class="token operator">!=</span> widget<span class="token punctuation">.</span>keepAlive<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// keepAlive 状态需要更新，实现在 AutomaticKeepAliveClientMixin 中</span>
      <span class="token function">updateKeepAlive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">didUpdateWidget</span><span class="token punctuation">(</span>oldWidget<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="_7-监听tabcontroller改变事件" tabindex="-1"><a class="header-anchor" href="#_7-监听tabcontroller改变事件" aria-hidden="true">#</a> 7. 监听<code v-pre>TabController</code>改变事件</h4>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token metadata function">@override</span>
  <span class="token keyword">void</span> <span class="token function">initState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// TODO: implement initState</span>
    <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">initState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    _tabController <span class="token operator">=</span> <span class="token class-name">TabController</span><span class="token punctuation">(</span>length<span class="token punctuation">:</span> <span class="token number">9</span><span class="token punctuation">,</span> vsync<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 监听_tabController的改变事件</span>
    _tabController<span class="token punctuation">.</span><span class="token function">addListener</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// print(_tabController.index); // 获取两次</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>_tabController<span class="token punctuation">.</span>animation<span class="token operator">!</span><span class="token punctuation">.</span>value <span class="token operator">==</span> _tabController<span class="token punctuation">.</span>index<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">print</span><span class="token punctuation">(</span>_tabController<span class="token punctuation">.</span>index<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="_8-materialapp-去掉debug图标" tabindex="-1"><a class="header-anchor" href="#_8-materialapp-去掉debug图标" aria-hidden="true">#</a> 8. <code v-pre>MaterialApp </code>去掉<code v-pre>debug</code>图标</h4>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">return</span> <span class="token class-name">MaterialApp</span><span class="token punctuation">(</span>
    debugShowCheckedModeBanner<span class="token punctuation">:</span><span class="token boolean">false</span> <span class="token punctuation">,</span> <span class="token comment">//去掉debug图标</span>
    home<span class="token punctuation">:</span><span class="token class-name">Tabs</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="dialog-弹窗" tabindex="-1"><a class="header-anchor" href="#dialog-弹窗" aria-hidden="true">#</a> <code v-pre>Dialog</code> 弹窗</h2>
<h3 id="_1-alertdialog" tabindex="-1"><a class="header-anchor" href="#_1-alertdialog" aria-hidden="true">#</a> 1. <code v-pre>AlertDialog</code></h3>
<p><code v-pre>alertDialog</code>对话框会通知用户需要确认的情况。具有可选标题和可选的操作列表。标题显示在内容上方，操作显示在内容下方。通常我们在点击一些需要用户确认操作的功能（例如删除，等 ）的时候就会用到这个<code v-pre>alertDialog </code>对话框</p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">const</span> <span class="token class-name">AlertDialog</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token class-name">Key</span> key<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>title<span class="token punctuation">,</span>     <span class="token comment">// 标题内容</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>titlePadding<span class="token punctuation">,</span>  <span class="token comment">// 标题与周围边距</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>titleTextStyle<span class="token punctuation">,</span>    <span class="token comment">// 标题样式</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>content<span class="token punctuation">,</span>   <span class="token comment">// 消息内容</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>contentPadding <span class="token operator">=</span> <span class="token keyword">const</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">fromLTRB</span><span class="token punctuation">(</span><span class="token number">24.0</span><span class="token punctuation">,</span> <span class="token number">20.0</span><span class="token punctuation">,</span> <span class="token number">24.0</span><span class="token punctuation">,</span> <span class="token number">24.0</span><span class="token punctuation">)</span><span class="token punctuation">,</span>      <span class="token comment">// 消息内容与周围边距</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>contentTextStyle<span class="token punctuation">,</span>  <span class="token comment">// 消息内容样式</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>actions<span class="token punctuation">,</span>   <span class="token comment">// 操作按钮组合</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>backgroundColor<span class="token punctuation">,</span>   <span class="token comment">// 对话框背景色</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>elevation<span class="token punctuation">,</span>     <span class="token comment">// 对话框阴影</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>semanticLabel<span class="token punctuation">,</span>     <span class="token comment">// 对话框语义化标签</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>shape<span class="token punctuation">,</span>     <span class="token comment">// 对话框形状</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> 
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token function">showDialog</span><span class="token punctuation">(</span>context<span class="token punctuation">:</span> context<span class="token punctuation">,</span>
    builder<span class="token punctuation">:</span> <span class="token punctuation">(</span>context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token class-name">AlertDialog</span><span class="token punctuation">(</span>
          title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'AlertDialog'</span></span><span class="token punctuation">,</span> 
          	style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>blueAccent<span class="token punctuation">)</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          content<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'我是 AlertDialog 对话框!'</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          actions<span class="token punctuation">:</span> <span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Widget</span><span class="token punctuation">></span></span><span class="token punctuation">[</span>
            <span class="token class-name">FlatButton</span><span class="token punctuation">(</span>
                child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"确定"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span> 
                onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token class-name">Navigator</span><span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token class-name">FlatButton</span><span class="token punctuation">(</span>
                child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"取消"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span> 
                onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token class-name">Navigator</span><span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
          <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_2-simpledialog、simpledialogoption" tabindex="-1"><a class="header-anchor" href="#_2-simpledialog、simpledialogoption" aria-hidden="true">#</a> 2. <code v-pre>SimpleDialog</code>、<code v-pre>SimpleDialogOption</code></h3>
<p>为用户提供了多个选项之间的选择。有一个可选的标题，显示在选项上方。下面则是具体的选择项 ,通常我们在项目中用这个<code v-pre>simpleDialog</code> 来实现一些列表选择则的功能的实现  。</p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">const</span> <span class="token class-name">SimpleDialog</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token class-name">Key</span> key<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>title<span class="token punctuation">,</span>     <span class="token comment">// 标题内容</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>titlePadding <span class="token operator">=</span> <span class="token keyword">const</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">fromLTRB</span><span class="token punctuation">(</span><span class="token number">24.0</span><span class="token punctuation">,</span> <span class="token number">24.0</span><span class="token punctuation">,</span> <span class="token number">24.0</span><span class="token punctuation">,</span> <span class="token number">0.0</span><span class="token punctuation">)</span><span class="token punctuation">,</span>  <span class="token comment">// 标题与周围边距</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>children<span class="token punctuation">,</span>   <span class="token comment">// 消息内容</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>contentPadding <span class="token operator">=</span> <span class="token keyword">const</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">fromLTRB</span><span class="token punctuation">(</span><span class="token number">0.0</span><span class="token punctuation">,</span> <span class="token number">12.0</span><span class="token punctuation">,</span> <span class="token number">0.0</span><span class="token punctuation">,</span> <span class="token number">16.0</span><span class="token punctuation">)</span><span class="token punctuation">,</span>      <span class="token comment">// 消息内容与周围边距</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>backgroundColor<span class="token punctuation">,</span>  <span class="token comment">// 对话框背景色</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>elevation<span class="token punctuation">,</span>     <span class="token comment">// 对话框阴影</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>semanticLabel<span class="token punctuation">,</span>     <span class="token comment">// 对话框语义化标签</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>shape<span class="token punctuation">,</span>     <span class="token comment">// 对话框形状</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token function">showDialog</span><span class="token punctuation">(</span>context<span class="token punctuation">:</span> context<span class="token punctuation">,</span>
    builder<span class="token punctuation">:</span> <span class="token punctuation">(</span>context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token class-name">SimpleDialog</span><span class="token punctuation">(</span>
          title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'SimpleDialog'</span></span><span class="token punctuation">,</span> 
              style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>blueAccent<span class="token punctuation">)</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          children<span class="token punctuation">:</span> <span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Widget</span><span class="token punctuation">></span></span><span class="token punctuation">[</span>
            <span class="token class-name">Padding</span><span class="token punctuation">(</span>child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'我是 SimpleDialog 对话框？'</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span> 
                padding<span class="token punctuation">:</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token number">20.0</span><span class="token punctuation">)</span>
           <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token class-name">SimpleDialogOption</span><span class="token punctuation">(</span>
                child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'Yes'</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span> 
                onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token class-name">Navigator</span><span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
        	<span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token class-name">SimpleDialogOption</span><span class="token punctuation">(</span>
                child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'No'</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span> 
                onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token class-name">Navigator</span><span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span>
            <span class="token punctuation">)</span>
          <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_3-unconstrainedbox-sizedbox" tabindex="-1"><a class="header-anchor" href="#_3-unconstrainedbox-sizedbox" aria-hidden="true">#</a> 3. <code v-pre>UnconstrainedBox</code> + <code v-pre>SizedBox</code></h3>
<p><strong><code v-pre>Flutter</code></strong> 的对话框中均未提供更改宽度的属性，高度可以自适应；可以采用 <strong><code v-pre>UnconstrainedBox + SizedBox</code></strong> 可以实现对话框的宽度更改，首先用 <strong><code v-pre>UnconstrainedBox</code></strong> 抵消 <strong><code v-pre>showDialog</code></strong> 对宽度的限制；之后采用 <strong><code v-pre>SizedBox</code></strong> 设置对话框宽度；注意此时设置高度并没有效果依旧自适应；对话框宽度以 <strong><code v-pre>SizedBox</code></strong> 设置的 <strong><code v-pre>width</code></strong> 为主，<strong><code v-pre>child</code></strong> 的宽度无效；</p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token function">showDialog</span><span class="token punctuation">(</span>context<span class="token punctuation">:</span> context<span class="token punctuation">,</span> barrierDismissible<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    builder<span class="token punctuation">:</span> <span class="token punctuation">(</span>context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token class-name">UnconstrainedBox</span><span class="token punctuation">(</span>
          constrainedAxis<span class="token punctuation">:</span> <span class="token class-name">Axis</span><span class="token punctuation">.</span>vertical<span class="token punctuation">,</span>
          child<span class="token punctuation">:</span> <span class="token class-name">SizedBox</span><span class="token punctuation">(</span>width<span class="token punctuation">:</span> <span class="token number">180.0</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">180.0</span><span class="token punctuation">,</span>
              child<span class="token punctuation">:</span> <span class="token class-name">AlertDialog</span><span class="token punctuation">(</span>content<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>ac_unit<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_4-aboutdialog" tabindex="-1"><a class="header-anchor" href="#_4-aboutdialog" aria-hidden="true">#</a> 4. <code v-pre>AboutDialog</code></h3>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">const</span> <span class="token class-name">AboutDialog</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token class-name">Key</span> key<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>applicationName<span class="token punctuation">,</span>       <span class="token comment">// 应用名称</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>applicationVersion<span class="token punctuation">,</span>    <span class="token comment">// 版本说明</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>applicationIcon<span class="token punctuation">,</span>       <span class="token comment">// 应用图标</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>applicationLegalese<span class="token punctuation">,</span>   <span class="token comment">// 法律声明</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>children<span class="token punctuation">,</span>              <span class="token comment">// 消息内容</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>分析源码可知，<strong><code v-pre>AboutDialog</code></strong> 继承自 <strong><code v-pre>AlertDialog</code></strong> 但对于自定义内容较少，对于 <strong><code v-pre>applicationName / applicationVersion / applicationLegalese</code></strong> 仅提供字符串方式，无法调整样式；且默认有版权和取消按钮</p>
<blockquote>
<p><strong><code v-pre>AboutDialog</code></strong> 类似于系统对话框，整体效果我们无法调整，对于主体内容 <strong><code v-pre>children</code></strong> 部分，与 <strong><code v-pre>SimpleDialog</code></strong> 类似，无法延迟加载模型组件，对于 <strong><code v-pre>ListView</code></strong> 等需明确高度</p>
</blockquote>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token function">showDialog</span><span class="token punctuation">(</span>context<span class="token punctuation">:</span> context<span class="token punctuation">,</span>
    barrierDismissible<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    builder<span class="token punctuation">:</span> <span class="token punctuation">(</span>context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token class-name">AboutDialog</span><span class="token punctuation">(</span>
          applicationIcon<span class="token punctuation">:</span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
              child<span class="token punctuation">:</span> <span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">asset</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'images/icon_hzw02.jpg'</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">80.0</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          applicationName<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">'Flutter Dialog'</span></span><span class="token punctuation">,</span>
          applicationLegalese<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">'所有解释权归本人所有！'</span></span><span class="token punctuation">,</span>
          applicationVersion<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">'V1.5.2'</span></span><span class="token punctuation">,</span>
          children<span class="token punctuation">:</span> <span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Widget</span><span class="token punctuation">></span></span><span class="token punctuation">[</span>
            <span class="token class-name">Padding</span><span class="token punctuation">(</span>
                padding<span class="token punctuation">:</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">only</span><span class="token punctuation">(</span>top<span class="token punctuation">:</span> <span class="token number">10.0</span><span class="token punctuation">)</span><span class="token punctuation">,</span> 
                child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'1. AboutDialog!'</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token class-name">Padding</span><span class="token punctuation">(</span>
                padding<span class="token punctuation">:</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">only</span><span class="token punctuation">(</span>top<span class="token punctuation">:</span> <span class="token number">10.0</span><span class="token punctuation">)</span><span class="token punctuation">,</span> 
                child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'2. SimpleDialog!'</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token class-name">Padding</span><span class="token punctuation">(</span>
                padding<span class="token punctuation">:</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">only</span><span class="token punctuation">(</span>top<span class="token punctuation">:</span> <span class="token number">10.0</span><span class="token punctuation">)</span><span class="token punctuation">,</span> 
                child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'3. AlertDialog!'</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span>
          <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_5-showaboutdialog" tabindex="-1"><a class="header-anchor" href="#_5-showaboutdialog" aria-hidden="true">#</a> 5. <code v-pre>showAboutDialog</code></h3>
<p><strong><code v-pre>Flutter</code></strong> 针对 <strong><code v-pre>AboutDialog</code></strong> 提供了简易的 <strong><code v-pre>showAboutDialog</code></strong> 方法；</p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">void</span> <span class="token function">showAboutDialog</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token metadata function">@required</span> <span class="token class-name">BuildContext</span> context<span class="token punctuation">,</span>
  <span class="token class-name">String</span> applicationName<span class="token punctuation">,</span>       <span class="token comment">// 应用名称</span>
  <span class="token class-name">String</span> applicationVersion<span class="token punctuation">,</span>    <span class="token comment">// 版本说明</span>
  <span class="token class-name">Widget</span> applicationIcon<span class="token punctuation">,</span>       <span class="token comment">// 应用图标</span>
  <span class="token class-name">String</span> applicationLegalese<span class="token punctuation">,</span>   <span class="token comment">// 法律声明</span>
  <span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Widget</span><span class="token punctuation">></span></span> children<span class="token punctuation">,</span>        <span class="token comment">// 消息内容</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p>分析源码，<strong><code v-pre>showAboutDialog</code></strong> 是简化版的 <strong><code v-pre>AboutDialog</code></strong>，参数几乎全部一致；差别在于 <strong><code v-pre>showDialog</code></strong> 方式可以设置点击遮罩是否关闭对话框，而 <strong><code v-pre>showAboutDialog</code></strong> 不支持；</p>
</blockquote>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token function">showAboutDialog</span><span class="token punctuation">(</span>context<span class="token punctuation">:</span> context<span class="token punctuation">,</span>
    applicationIcon<span class="token punctuation">:</span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
        child<span class="token punctuation">:</span> <span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">asset</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'images/icon_hzw02.jpg'</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">80.0</span>
    <span class="token punctuation">)</span><span class="token punctuation">,</span>
    applicationName<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">'Flutter Dialog'</span></span><span class="token punctuation">,</span>
    applicationLegalese<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">'所有解释权归本人所有！'</span></span><span class="token punctuation">,</span>
    applicationVersion<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">'V1.5.2'</span></span><span class="token punctuation">,</span>
    children<span class="token punctuation">:</span> <span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Widget</span><span class="token punctuation">></span></span><span class="token punctuation">[</span>
      <span class="token class-name">Padding</span><span class="token punctuation">(</span>
          padding<span class="token punctuation">:</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">only</span><span class="token punctuation">(</span>top<span class="token punctuation">:</span> <span class="token number">10.0</span><span class="token punctuation">)</span><span class="token punctuation">,</span> 
          child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'1. AboutDialog!'</span></span><span class="token punctuation">)</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token class-name">Padding</span><span class="token punctuation">(</span>
          padding<span class="token punctuation">:</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">only</span><span class="token punctuation">(</span>top<span class="token punctuation">:</span> <span class="token number">10.0</span><span class="token punctuation">)</span><span class="token punctuation">,</span> 
          child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'2. SimpleDialog!'</span></span><span class="token punctuation">)</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token class-name">Padding</span><span class="token punctuation">(</span>
          padding<span class="token punctuation">:</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">only</span><span class="token punctuation">(</span>top<span class="token punctuation">:</span> <span class="token number">10.0</span><span class="token punctuation">)</span><span class="token punctuation">,</span> 
          child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'3. AlertDialog!'</span></span><span class="token punctuation">)</span>
      <span class="token punctuation">)</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_6-showdialog" tabindex="-1"><a class="header-anchor" href="#_6-showdialog" aria-hidden="true">#</a> 6. <code v-pre>showDialog</code></h3>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token class-name">Future</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">T</span><span class="token punctuation">></span></span> showDialog<span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">T</span><span class="token punctuation">></span></span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token metadata function">@required</span> <span class="token class-name">BuildContext</span> context<span class="token punctuation">,</span>
  bool barrierDismissible <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">,</span>   <span class="token comment">// 遮罩层点击是否关闭对话框</span>
  <span class="token metadata function">@Deprecated</span><span class="token punctuation">(</span>
    <span class="token string-literal"><span class="token string">'Instead of using the "child" argument, return the child from a closure '</span></span>
    <span class="token string-literal"><span class="token string">'provided to the "builder" argument. This will ensure that the BuildContext '</span></span>
    <span class="token string-literal"><span class="token string">'is appropriate for widgets built in the dialog.'</span></span>
  <span class="token punctuation">)</span> <span class="token class-name">Widget</span> child<span class="token punctuation">,</span>
  <span class="token class-name">WidgetBuilder</span> builder<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p>分析源码，<strong><code v-pre>showDialog</code></strong> 采用 <strong><code v-pre>builder</code></strong> 方式取代 <strong><code v-pre>child</code></strong> 方式；而实际上 <strong><code v-pre>showDialog</code></strong> 是对 <strong><code v-pre>showGeneralDialog</code></strong> 的封装，默认的遮罩层颜色和渐进渐出的动画效果；</p>
</blockquote>
<h3 id="_7-showgeneraldialog" tabindex="-1"><a class="header-anchor" href="#_7-showgeneraldialog" aria-hidden="true">#</a> 7. <code v-pre>showGeneralDialog</code></h3>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token class-name">Future</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">T</span><span class="token punctuation">></span></span> showGeneralDialog<span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">T</span><span class="token punctuation">></span></span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token metadata function">@required</span> <span class="token class-name">BuildContext</span> context<span class="token punctuation">,</span>
  <span class="token metadata function">@required</span> <span class="token class-name">RoutePageBuilder</span> pageBuilder<span class="token punctuation">,</span>   <span class="token comment">// 对话框内部绘制</span>
  bool barrierDismissible<span class="token punctuation">,</span>      <span class="token comment">// 遮罩层点击是否关闭对话框</span>
  <span class="token class-name">String</span> barrierLabel<span class="token punctuation">,</span>      <span class="token comment">// 语义化标签</span>
  <span class="token class-name">Color</span> barrierColor<span class="token punctuation">,</span>       <span class="token comment">// 遮罩层颜色</span>
  <span class="token class-name">Duration</span> transitionDuration<span class="token punctuation">,</span>      <span class="token comment">// 动画持续时长</span>
  <span class="token class-name">RouteTransitionsBuilder</span> transitionBuilder<span class="token punctuation">,</span>    <span class="token comment">// 动画过程</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p>分析源码，<strong><code v-pre>showGeneralDialog</code></strong> 提供了更丰富的对话框设计；而实际也是对 <strong><code v-pre>Navigator.push</code></strong> 的封装；</p>
</blockquote>
<p>由底部弹出且透明度由 0.0 到 1.0；测试 <strong><code v-pre>barrierColor</code></strong> 进入和退出时都是渐变符合动画效果，与采用 <strong><code v-pre>Navigator</code></strong> 打开页面动画方式不同；</p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token function">showGeneralDialog</span><span class="token punctuation">(</span>context<span class="token punctuation">:</span> context<span class="token punctuation">,</span>
    pageBuilder<span class="token punctuation">:</span> <span class="token punctuation">(</span>buildContext<span class="token punctuation">,</span> _<span class="token punctuation">,</span> __<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token class-name">Center</span><span class="token punctuation">(</span>child<span class="token punctuation">:</span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
              height<span class="token punctuation">:</span> <span class="token number">200.0</span><span class="token punctuation">,</span> width<span class="token punctuation">:</span> <span class="token number">200.0</span><span class="token punctuation">,</span>
              decoration<span class="token punctuation">:</span> <span class="token class-name">BoxDecoration</span><span class="token punctuation">(</span>color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>greenAccent<span class="token punctuation">,</span> borderRadius<span class="token punctuation">:</span> <span class="token class-name">BorderRadius</span><span class="token punctuation">.</span><span class="token function">circular</span><span class="token punctuation">(</span><span class="token number">5.0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
              child<span class="token punctuation">:</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>ac_unit<span class="token punctuation">,</span> color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>white<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    barrierDismissible<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    barrierColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>pink<span class="token punctuation">.</span><span class="token function">withOpacity</span><span class="token punctuation">(</span><span class="token number">0.2</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    transitionDuration<span class="token punctuation">:</span> <span class="token class-name">Duration</span><span class="token punctuation">(</span>milliseconds<span class="token punctuation">:</span> <span class="token number">1500</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    transitionBuilder<span class="token punctuation">:</span> <span class="token punctuation">(</span>context<span class="token punctuation">,</span> animation<span class="token punctuation">,</span> secondaryAnimation<span class="token punctuation">,</span> child<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token class-name">SlideTransition</span><span class="token punctuation">(</span>
          position<span class="token punctuation">:</span> <span class="token class-name">Tween</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Offset</span><span class="token punctuation">></span></span><span class="token punctuation">(</span>
              begin<span class="token punctuation">:</span> <span class="token class-name">Offset</span><span class="token punctuation">(</span><span class="token number">0.0</span><span class="token punctuation">,</span> <span class="token number">1.0</span><span class="token punctuation">)</span><span class="token punctuation">,</span> 
              end<span class="token punctuation">:</span> <span class="token class-name">Offset</span><span class="token punctuation">(</span><span class="token number">0.0</span><span class="token punctuation">,</span> <span class="token number">0.0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token class-name">CurvedAnimation</span><span class="token punctuation">(</span>parent<span class="token punctuation">:</span> animation<span class="token punctuation">,</span> curve<span class="token punctuation">:</span> <span class="token class-name">Curves</span><span class="token punctuation">.</span>fastOutSlowIn<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          child<span class="token punctuation">:</span> <span class="token class-name">FadeTransition</span><span class="token punctuation">(</span>opacity<span class="token punctuation">:</span> <span class="token class-name">Tween</span><span class="token punctuation">(</span>
              begin<span class="token punctuation">:</span> <span class="token number">0.0</span><span class="token punctuation">,</span> 
              end<span class="token punctuation">:</span> <span class="token number">1.0</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token class-name">CurvedAnimation</span><span class="token punctuation">(</span>parent<span class="token punctuation">:</span> animation<span class="token punctuation">,</span> curve<span class="token punctuation">:</span> <span class="token class-name">Curves</span><span class="token punctuation">.</span>linear<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
              child<span class="token punctuation">:</span> child<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_8-自定义flutter-dialog-、material组件、inkwell组件" tabindex="-1"><a class="header-anchor" href="#_8-自定义flutter-dialog-、material组件、inkwell组件" aria-hidden="true">#</a> 8. 自定义<code v-pre>Flutter Dialog </code>、<code v-pre>Material</code>组件、<code v-pre>InkWell</code>组件</h3>
<p>自定义<code v-pre>Dialog</code>对象，需要继承<code v-pre>Dialog</code>类，尽管<code v-pre>Dialog</code>提供了<code v-pre>child</code>参数可以用来写视图界面，但是往往会 达不到我们想要的效果，因为默认的Dialog背景框是满屏的。如果我们想完全定义界面，就需要重写<code v-pre> build</code>函数。下面我们通过两个案例给大家演示一下<code v-pre>Dialog</code>的使用。</p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'package:flutter/material.dart'</span></span><span class="token punctuation">;</span>

<span class="token keyword">class</span> dialog <span class="token keyword">extends</span> <span class="token class-name">Dialog</span> <span class="token punctuation">{</span>
  <span class="token keyword">final</span> <span class="token class-name">String</span> title<span class="token punctuation">;</span>
  <span class="token keyword">final</span> <span class="token class-name">String</span> content<span class="token punctuation">;</span>
  <span class="token keyword">void</span> <span class="token class-name">Function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">?</span> onClose<span class="token punctuation">;</span>
  <span class="token function">dialog</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>title<span class="token operator">=</span><span class="token string-literal"><span class="token string">"提示"</span></span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>content <span class="token operator">=</span> <span class="token string-literal"><span class="token string">""</span></span><span class="token punctuation">,</span>required <span class="token keyword">this</span><span class="token punctuation">.</span>onClose<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token class-name">Material</span><span class="token punctuation">(</span>
      type<span class="token punctuation">:</span> <span class="token class-name">MaterialType</span><span class="token punctuation">.</span>transparency<span class="token punctuation">,</span> <span class="token comment">// 设置背景透明</span>
      child<span class="token punctuation">:</span> <span class="token class-name">Center</span><span class="token punctuation">(</span> <span class="token comment">// 要包裹一个组件，否则会全屏</span>
        child<span class="token punctuation">:</span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
          padding<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          width<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
          height<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
          color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>white<span class="token punctuation">,</span>
          child<span class="token punctuation">:</span> <span class="token class-name">Column</span><span class="token punctuation">(</span>children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
            <span class="token class-name">Stack</span><span class="token punctuation">(</span>
              children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
                <span class="token class-name">Align</span><span class="token punctuation">(</span>
                  alignment<span class="token punctuation">:</span> <span class="token class-name">Alignment</span><span class="token punctuation">.</span>centerLeft<span class="token punctuation">,</span>
                  child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span>
                    title<span class="token punctuation">,</span>
                    style<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>
                      fontSize<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
                      fontWeight<span class="token punctuation">:</span> <span class="token class-name">FontWeight</span><span class="token punctuation">.</span>w600
                    <span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token class-name">Align</span><span class="token punctuation">(</span>
                  alignment<span class="token punctuation">:</span> <span class="token class-name">Alignment</span><span class="token punctuation">.</span>centerRight<span class="token punctuation">,</span>
                  child<span class="token punctuation">:</span> <span class="token class-name">InkWell</span><span class="token punctuation">(</span>
                    child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>close<span class="token punctuation">)</span><span class="token punctuation">,</span>
                    onTap<span class="token punctuation">:</span> onClose<span class="token punctuation">,</span>
                  <span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token punctuation">)</span>
              <span class="token punctuation">]</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token keyword">const</span> <span class="token class-name">Divider</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token class-name">SizedBox</span><span class="token punctuation">(</span>
              width<span class="token punctuation">:</span> double<span class="token punctuation">.</span>infinity<span class="token punctuation">,</span>
              child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">)</span>
          <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span>
      <span class="token punctuation">)</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token function">showDialog</span><span class="token punctuation">(</span>
      barrierDismissible<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      context<span class="token punctuation">:</span> context<span class="token punctuation">,</span> 
      builder<span class="token punctuation">:</span> <span class="token punctuation">(</span>context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token function">dialog</span><span class="token punctuation">(</span>content<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">"我是内容"</span></span><span class="token punctuation">,</span>onClose<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token class-name">Navigator</span><span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="pageview组件" tabindex="-1"><a class="header-anchor" href="#pageview组件" aria-hidden="true">#</a> <code v-pre>PageView</code>组件</h2>
<p><code v-pre>Flutter</code>中的轮动图以及抖音上下滑页切换视频功能等等，这些都可以通过<code v-pre>PageView</code> 轻松实现</p>
<p><code v-pre>PageView</code>常见属性：</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code v-pre>scrollDirection</code></td>
<td><code v-pre>Axis.horizonta</code>水平方向 <code v-pre>Axis.vertical</code>锤子方向</td>
</tr>
<tr>
<td><code v-pre>children</code></td>
<td>配置子元素</td>
</tr>
<tr>
<td><code v-pre>allowImplicitScrolling</code></td>
<td>缓存当前页面的前后两页</td>
</tr>
<tr>
<td><code v-pre>onPageChanged </code></td>
<td><code v-pre>page</code>改变的时候触发</td>
</tr>
</tbody>
</table>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token comment">// PageView构造函数</span>
<span class="token class-name">PageView</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token class-name">Key</span><span class="token operator">?</span> key<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>scrollDirection <span class="token operator">=</span> <span class="token class-name">Axis</span><span class="token punctuation">.</span>horizontal<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>reverse <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token class-name">PageController</span><span class="token operator">?</span> controller<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>physics<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>pageSnapping <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>onPageChanged<span class="token punctuation">,</span>
    <span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Widget</span><span class="token punctuation">></span></span> children <span class="token operator">=</span> <span class="token keyword">const</span> <span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Widget</span><span class="token punctuation">></span></span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>dragStartBehavior <span class="token operator">=</span> <span class="token class-name">DragStartBehavior</span><span class="token punctuation">.</span>start<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>allowImplicitScrolling <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>restorationId<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>clipBehavior <span class="token operator">=</span> <span class="token class-name">Clip</span><span class="token punctuation">.</span>hardEdge<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>scrollBehavior<span class="token punctuation">,</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>padEnds <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol>
<li><code v-pre>scrollDirection</code> = <code v-pre>Axis.horizontal</code>
滚动方向，水平或者垂直，默认垂直</li>
<li><code v-pre>reverse</code>
这个规定了<code v-pre>children</code>(子节点)的排序是否是倒序</li>
<li><code v-pre>controller</code>
滚动控制器，可以定位页面，获取当前页面等信息</li>
<li><code v-pre>physics</code>
滑动效果，不设置，会根据不同平台有不同的滚动效果
<ul>
<li><code v-pre>NeverScrollableScrollPhysics</code> 设置后，页面就不可滚动</li>
<li><code v-pre>BouncingScrollPhysics</code> 表示滚动到底了会有弹回的效果，就是<code v-pre>iOS</code>的默认交互</li>
<li><code v-pre>ClampingScrollPhysics</code> 表示滚动到底了就给一个效果，就是<code v-pre>Android</code>的默认交互</li>
<li><code v-pre>FixedExtentScrollPhysics </code>就是<code v-pre>iOS</code>经典选择时间组件<code v-pre>UIDatePicker</code>那种交互</li>
</ul>
</li>
<li><code v-pre>pageSnapping</code>
设置是否整页滚动</li>
<li><code v-pre>onPageChanged</code>
页面发生改变时的回调</li>
<li><code v-pre>children</code>
子页面组件列表</li>
<li><code v-pre>dragStartBehavior</code>
这个属性是设置认定开始拖动行为的方式，可以选择的是<code v-pre>down</code>和<code v-pre>start</code>两个，默认是<code v-pre>start. down</code>是第一个手指按下认定拖动开始，start是手指拖动才算开始。</li>
<li><code v-pre>allowImplicitScrolling</code>
这个属性一般提供给视障人士使用的，默认是<code v-pre>fasle</code></li>
</ol>
<h3 id="pageview" tabindex="-1"><a class="header-anchor" href="#pageview" aria-hidden="true">#</a> <code v-pre>PageView</code>()</h3>
<p>这种方式没有实现Sliver模型，会把所有的子页面一次性全部初始化出来。</p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token class-name">PageView</span><span class="token punctuation">(</span>
    scrollDirection<span class="token punctuation">:</span> <span class="token class-name">Axis</span><span class="token punctuation">.</span>horizontal<span class="token punctuation">,</span>
    children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
      <span class="token class-name">Container</span><span class="token punctuation">(</span>
        height<span class="token punctuation">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
        color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>pink<span class="token punctuation">,</span>
        child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Center</span><span class="token punctuation">(</span>
          child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"This is a page1"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token class-name">Container</span><span class="token punctuation">(</span>
        color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>teal<span class="token punctuation">,</span>
        child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Center</span><span class="token punctuation">(</span>
          child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"This is a page2"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token class-name">Container</span><span class="token punctuation">(</span>
        color<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>amber<span class="token punctuation">,</span>
        child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Center</span><span class="token punctuation">(</span>
          child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"This is a page3"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="pageview-builder" tabindex="-1"><a class="header-anchor" href="#pageview-builder" aria-hidden="true">#</a> <code v-pre>PageView.builder</code>()</h3>
<p>这个方式不会把所有的子组件一次性全部创建，是Sliver懒加载，推荐使用，会传一个<code v-pre>itemCount</code>和<code v-pre>itemBuilder</code></p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token class-name">PageView</span><span class="token punctuation">.</span><span class="token function">builder</span><span class="token punctuation">(</span>
    scrollDirection<span class="token punctuation">:</span> <span class="token class-name">Axis</span><span class="token punctuation">.</span>vertical<span class="token punctuation">,</span>
    itemCount<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
    itemBuilder<span class="token punctuation">:</span> <span class="token punctuation">(</span>context<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token class-name">Color</span><span class="token operator">?</span> color<span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        color <span class="token operator">=</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>pink<span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">==</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        color <span class="token operator">=</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>teal<span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        color <span class="token operator">=</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>amber<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">return</span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
        color<span class="token punctuation">:</span> color<span class="token punctuation">,</span>
        child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Center</span><span class="token punctuation">(</span>
          child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"This is a page"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="pageview-custom" tabindex="-1"><a class="header-anchor" href="#pageview-custom" aria-hidden="true">#</a> <code v-pre>PageView.custom</code>()</h3>
<p>这种方式是需要一个<code v-pre>SliverChildDelegate</code>，来自定义子组件行为，属于比较进阶的用法。</p>
<h3 id="轮播图" tabindex="-1"><a class="header-anchor" href="#轮播图" aria-hidden="true">#</a> 轮播图</h3>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">import</span> <span class="token string-literal"><span class="token string">'package:flutter/material.dart'</span></span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">KeepAliveWrapper</span> <span class="token keyword">extends</span> <span class="token class-name">StatefulWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token class-name">KeepAliveWrapper</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">super</span><span class="token punctuation">.</span>key<span class="token punctuation">,</span> required <span class="token keyword">this</span><span class="token punctuation">.</span>chind<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>keepAlive <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">final</span> <span class="token class-name">Widget</span><span class="token operator">?</span> chind<span class="token punctuation">;</span>
  <span class="token keyword">final</span> bool keepAlive<span class="token punctuation">;</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">State</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">KeepAliveWrapper</span><span class="token punctuation">></span></span> <span class="token function">createState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">_KeepAliveWrapperState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> _KeepAliveWrapperState <span class="token keyword">extends</span> <span class="token class-name">State</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">KeepAliveWrapper</span><span class="token punctuation">></span></span> <span class="token keyword">with</span> <span class="token class-name">AutomaticKeepAliveClientMixin</span> <span class="token punctuation">{</span>
  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> widget<span class="token punctuation">.</span>chind<span class="token operator">!</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token metadata function">@override</span>
  bool <span class="token keyword">get</span> wantKeepAlive <span class="token operator">=</span><span class="token operator">></span> widget<span class="token punctuation">.</span>keepAlive<span class="token punctuation">;</span>

  <span class="token metadata function">@override</span>
  <span class="token keyword">void</span> <span class="token function">didUpdateWidget</span><span class="token punctuation">(</span><span class="token keyword">covariant</span> <span class="token class-name">KeepAliveWrapper</span> oldWidget<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>oldWidget<span class="token punctuation">.</span>keepAlive <span class="token operator">!=</span> widget<span class="token punctuation">.</span>keepAlive<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// keepAlive 状态需要更新，实现在 AutomaticKeepAliveClientMixin 中</span>
      <span class="token function">updateKeepAlive</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">didUpdateWidget</span><span class="token punctuation">(</span>oldWidget<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="animatedlist-实现动态列表" tabindex="-1"><a class="header-anchor" href="#animatedlist-实现动态列表" aria-hidden="true">#</a> <code v-pre>AnimatedList</code> 实现动态列表</h2>
<p><strong><code v-pre>AnimatedList</code>实现动画</strong></p>
<p><code v-pre>AnimatedList </code>和<code v-pre>ListView</code>的功能大体相似，不同的是，<code v-pre>AnimatedList</code>可以在列表中插入或删除节点 时执行一个动画，在需要添加或删除列表项的场景中会提高用户体验。</p>
<p><code v-pre>AnimatedList</code> 是一个 <code v-pre>StatefulWidget</code>，它对应的 <code v-pre>State</code> 类型为 <code v-pre>AnimatedListState</code>，添加和删除元素的 方法位于 <code v-pre>AnimatedListState</code> 中：</p>
<div class="language-dart line-numbers-mode" data-ext="dart"><pre v-pre class="language-dart"><code><span class="token keyword">void</span> <span class="token function">insertItem</span><span class="token punctuation">(</span>int index<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token class-name">Duration</span> duration <span class="token operator">=</span> _kDuration <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">void</span> <span class="token function">removeItem</span><span class="token punctuation">(</span>int index<span class="token punctuation">,</span> <span class="token class-name">AnimatedListRemovedItemBuilder</span> builder<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token class-name">Duration</span>
duration <span class="token operator">=</span> _kDuration <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>AnimatedList</code>常见属性：</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code v-pre>key</code></td>
<td><code v-pre>final _globalKey = GlobalKey&lt;AnimatedListState&gt;();</code></td>
</tr>
<tr>
<td><code v-pre>initialItemCount </code></td>
<td>子元素数量</td>
</tr>
<tr>
<td><code v-pre>itemBuilder</code></td>
<td>方法 <code v-pre>( BuildContext context, int index, Animation animation) {})</code></td>
</tr>
</tbody>
</table>
<p><strong>关于<code v-pre>GlobalKey</code>：</strong> 每个 <code v-pre>Widget</code> 都对应一个 <code v-pre>Element</code> ，我们可以直接对 <code v-pre>Widget</code> 进行操作，但是无法直 接操作<code v-pre>Widget</code>对应的 <code v-pre>Element</code> 。而 <code v-pre>GlobalKey</code> 就是那把直接访问 <code v-pre>Element </code>的钥匙。通过<code v-pre>GlobalKey</code> 可以获取到 <code v-pre>Widget</code> 对应的 <code v-pre>Element </code>。</p>
</div></template>


